# [Tailwind] Configuration 配置
###### tags: `Tailwind`
* 預設會在專案的根目錄使用 `tailwind.config.js` 做為配置檔
* 初始化：`npx tailwindcss init`
* TypeScript：`npx tailwindcss init --ts`
* 改名：
* 初時化時透過指令自訂檔名。例：`npx tailwindcss init custom-name.js`
* 指定自訂檔案路徑
* 使用 Tailwind CLI 時：`npx tailwindcss -c ./custom-name.js -i input.css -o output.css`
* 作為 PostCSS plugin 時：
```javascript
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: { config: './custom-name.js' },
},
};
```
* 透過 `@config` 指定
```css
@config "./custom-name.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
```
* 只需設定要變更的內容即可，其餘會使用預設配置（官方建議盡可能減少設定內容）
* 可設定項目
* [content](#content)：配置所有 HTML templates、JS components 以及有使用到 Tailwind class 的任何檔案的路徑
* theme：定義與網站視覺設計相關的內容，例：顏色、字體、框線、圓角、斷點等
* 寫在第一層的內容會直接覆寫預設值，[可設定的 key 詳見官網](https://tailwindcss.com/docs/theme#configuration-reference)
* 若想保留預設值，但又要添加新的值時，將新值寫在 `theme.extend`
* colors：設定顏色
* 預設有 22 種色系：
* 灰黑色系：Slate、Gray、Zinc、Neutral、Stone
* 橘黃色系：Orange、Amber、Yellow
* 綠色系：Lime、Green、Emerald、Teal
* 藍紫色系：Cyan、Sky、Blue、Indigo、Violet、Purple、Fuchsia
* 紅色系：Red、Pink、Rose
* 每種色系的後綴由淺至深有：50、100、200、300、400、500、600、700、800、900、950
* [screens](#screens)：設定響應式斷點
* [spacing](#spacing)：設定間距和尺寸
* plugins：註冊外掛程式
* presets：使用指定的預設配置，而不是使用 Tailwind 的預設配置
* prefix：使用時 class 名稱都需加上指定的前綴，不包含自訂的 class
* 例：設定 `prefix: 'tw-'` 後，需寫 `class="tw-text-lg md:tw-text-xl -tw-mt-8"`
* important：是否要將 Tailwind 的 utilities 都加上 `!important`，包含透過 `@layer utilities` 自訂的 utilities
* 若只想針對特定 utility，可以在名稱前加上 `!`
* 例：`<p class="!text-blue-500 text-red-500">文字顏色為藍色</p>`
* separator：設定使用哪個字元來分隔修飾符，預設是 `:`
* 使用情境：使用的模板語言（例如 Pug）不支援 class 名稱中有 `:` 時
* [corePlugins](#corePlugins)：禁止 Tailwind 預設生成指定的 class 或只生成指定的 class
* safelist：確保 Tailwind 生成未出現在原始碼內的 class 清單
* blocklist：忽略出現在原始碼內的 class 清單
## content
* 配置所有 HTML templates、JS components 以及有使用到 Tailwind class 的任何檔案的路徑
* 路徑是相對於專案根目錄，不是 Tailwind 配置檔
* 若要相對於配置檔，在 `content` 內設定 `relative` 和 `files`
```javascript
module.exports = {
content: {
relative: true,
files: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
},
};
```
* `**` 匹配零個或多個資料夾
* `*` 匹配除了斜線和隱藏檔外的任何內容
* 在 `{}` 內使用 `,` 分隔選項
* 不要包含 CSS 檔
* 不要動態建立 class 名稱
* 例：`<div class="text-{{ error ? 'red' : 'green' }}-600"></div>`，如有需要，應使用完整的名稱 `<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>`
```javascript
export default {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
};
```
## screens
* 設定響應式斷點
### 預設值
| Modifier | CSS |
| -- | ------------------------- |
| sm | @media (min-width: 640px) |
| md | @media (min-width: 768px) |
| lg | @media (min-width: 1024px) |
| xl | @media (min-width: 1280px) |
| 2xl | @media (min-width: 1536px) |
| min-[…] | @media (min-width: …) |
| max-sm | @media not all and (min-width: 640px) |
| max-md | @media not all and (min-width: 768px) |
| max-lg | @media not all and (min-width: 1024px) |
| max-xl | @media not all and (min-width: 1280px) |
| max-2xl | @media not all and (min-width: 1536px) |
| max-[…] | @media (max-width: …) |
### 範例：改成 Bootstrap 5 的斷點
```javascript
module.exports = {
theme: {
// 設定後只能用 sm、md、lg、xl、xxl，原本預設的 2xl 會被刪除無法使用
screens: {
'sm': '576px',
'md': '768px',
'lg': '1024px',
'xl': '1200px',
'xxl': '1400px',
},
},
};
```
## spacing
* 預設會被 `padding`、`margin`、`width`、`minWidth`、`maxWidth`、`height`、`minHeight`、`maxHeight`、`gap`、`inset`、`space`、`translate`、`scrollMargin`、`scrollPadding`、`flex-basis`、`textIndent` core plugins 繼承
| Name | Size | Pixels |
| ---- | ---- | ------ |
| 0 | 0px | 0px |
| px | 1px | 1px |
| 0.5 | 0.125rem | 2px |
| 1 | 0.25rem | 4px |
| 1.5 | 0.375rem | 6px |
| 2 | 0.5rem | 8px |
| 2.5 | 0.625rem | 10px |
| 3 | 0.75rem | 12px |
| 3.5 | 0.875rem | 14px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 7 | 1.75rem | 28px |
| 8 | 2rem | 32px |
| 9 | 2.25rem | 36px |
| 10 | 2.5rem | 40px |
| 11 | 2.75rem | 44px |
| 12 | 3rem | 48px |
| 14 | 3.5rem | 56px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
| 28 | 7rem | 112px |
| 32 | 8rem | 128px |
| 36 | 9rem | 144px |
| 40 | 10rem | 160px |
| 44 | 11rem | 176px |
| 48 | 12rem | 192px |
| 52 | 13rem | 208px |
| 56 | 14rem | 224px |
| 60 | 15rem | 240px |
| 64 | 16rem | 256px |
| 72 | 18rem | 288px |
| 80 | 20rem | 320px |
| 96 | 24rem | 384px |
## corePlugins
* 禁止 Tailwind 預設生成指定的 class 或只生成指定的 class
* [可選清單詳見官網](https://tailwindcss.com/docs/configuration#core-plugins)
### 禁用指定的 class
```javascript
module.exports = {
corePlugins: {
float: false,
objectFit: false,
objectPosition: false,
},
};
```
### 禁用所有 class
```javascript
module.exports = {
corePlugins: [],
};
```
### 只生成指定的 class
```javascript
module.exports = {
corePlugins: [
'margin',
'padding',
'backgroundColor',
],
};
```
## 參考資料
* [Tailwind CSS v3 官方文件：Configuration](https://tailwindcss.com/docs/configuration "Configuration - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Content](https://tailwindcss.com/docs/content-configuration "Content Configuration - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Theme](https://tailwindcss.com/docs/theme "Theme Configuration - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Screens](https://tailwindcss.com/docs/screens "Customizing Screens - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Colors](https://tailwindcss.com/docs/customizing-colors "Customizing Colors - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Spacing](https://tailwindcss.com/docs/customizing-spacing "Customizing Spacing - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Plugins](https://tailwindcss.com/docs/plugins "Plugins - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Presets](https://tailwindcss.com/docs/presets "Presets - Tailwind CSS")
---
:::info
建立日期：2024-03-16
更新日期：2024-03-21
:::
Sign in with Wallet
Connect another wallet