設定

由於 Tailwind 是用於建置客製化使用者介面的架構，因此從一開始就以自訂化為設計考量。

預設情況下，Tailwind 會在專案根目錄尋找選用的 tailwind.config.js 檔案，您可以在其中定義任何自訂化設定。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

設定檔的每個區段都是選用的，因此您只需指定想要變更的內容即可。任何遺漏的區段都將採用 Tailwind 的預設設定。

​建立設定檔

使用安裝 tailwindcss npm 套件時包含的 Tailwind CLI 工具，為你的專案產生一個 Tailwind 設定檔

npx tailwindcss init

這會在你的專案根目錄建立一個最小的 tailwind.config.js 檔案

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

​使用不同的檔案名稱

若要使用 tailwind.config.js 以外的名稱，請將其作為引數傳遞至命令列

npx tailwindcss init tailwindcss-config.js

使用自訂檔案名稱時，你需要在使用 Tailwind CLI 工具編譯 CSS 時，將其指定為命令列引數

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

如果你將 Tailwind 用作 PostCSS 外掛程式，你需要在 PostCSS 設定中指定自訂設定路徑

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

或者，你可以使用 @config 指令指定自訂設定路徑

@config "./tailwindcss-config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

在 函式和指令 文件中深入了解 @config 指令。

​使用 ESM 或 TypeScript

你也可以在 ESM 甚至 TypeScript 中設定 Tailwind CSS

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

當你執行 npx tailwindcss init 時，我們會偵測你的專案是否為 ES 模組，並自動產生適當語法的設定檔。

你也可以使用 --esm 旗標明確產生 ESM 設定檔

npx tailwindcss init --esm

若要產生 TypeScript 設定檔，請使用 --ts 旗標

npx tailwindcss init --ts

​產生 PostCSS 設定檔

如果你想在 tailwind.config.js 檔案旁也產生一個基本的 postcss.config.js 檔案，請使用 -p 旗標

npx tailwindcss init -p

這會在你的專案中產生一個 postcss.config.js 檔案，如下所示

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

​建立完整的預設設定

對於大多數使用者，我們建議你盡可能保持設定檔簡潔，只指定你想自訂的項目。

如果你希望建立一個包含所有 Tailwind 預設設定的完整設定檔，請使用 --full 選項

npx tailwindcss init --full

你會取得一個與 預設設定檔 相符的檔案，Tailwind 在內部使用。

​設定選項

​內容

content 區段是你設定所有 HTML 範本、JS 元件和任何包含 Tailwind 類別名稱的其他檔案路徑的地方。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}

在 內容設定 文件中了解有關設定內容來源的更多資訊。

​佈景主題

theme 區段是您定義色彩盤、字型、字型大小、邊框大小、斷點的區段，也就是與網站視覺設計相關的任何內容。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

在 主題設定指南 中深入了解預設主題以及如何自訂主題。

​外掛程式

plugins 區段讓您可以向 Tailwind 註冊外掛程式，這些外掛程式可用於產生額外的公用程式、元件、基本樣式或自訂變體。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

在 外掛程式撰寫指南 中深入了解如何撰寫您自己的外掛程式。

​預設值

presets 區段讓您可以指定自己的自訂基本設定，而不是使用 Tailwind 的預設基本設定。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

  // Project-specific customizations
  theme: {
    //...
  },
}

在 預設值文件 中深入了解預設值。

​前綴

prefix 選項允許您為 Tailwind 所有產生的公用程式類別新增自訂前綴。這在 Tailwind 與現有 CSS 疊加時非常有用，因為可能會發生命名衝突。

例如，您可以透過設定 prefix 選項來新增 tw- 前綴，如下所示

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
}

現在每個類別都會使用已設定的前綴產生

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

了解此前綴是在 任何 變體修改器之後新增非常重要。這表示具有回應式或狀態修改器的類別，例如 sm: 或 hover:，仍然會 首先 具有回應式或狀態修改器，而自訂前綴會出現在冒號之後

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

負值破折號修改器應在您的前綴之前新增，因此如果您已設定 tw- 為您的前綴，則 -mt-8 會變成 -tw-mt-8

<div class="-tw-mt-8">
  <!-- -->
</div>

前綴僅新增至 Tailwind 產生的類別；您的自訂類別不會新增任何前綴。

這表示如果您新增自訂公用程式如下所示

@layer utilities {
  .bg-brand-gradient { /* ... */ }
}

…產生的變體不會具有您設定的前綴

.bg-brand-gradient { /* ... */ }
.hover\:bg-brand-gradient:hover { /* ... */ }

如果您也想要為自訂公用程式加上前綴，只需將前綴新增至類別定義即可

@layer utilities {
  .tw-bg-brand-gradient { /* ... */ }
}

​重要

important 選項可讓您控制 Tailwind 的公用程式是否應標記為 !important。當與具有高特異性選擇器的現有 CSS 搭配使用 Tailwind 時，這項功能非常實用。

若要將公用程式產生為 !important，請將設定選項中的 important 鍵設定為 true

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
}

現在，Tailwind 的所有公用程式類別都將產生為 !important

.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
/* etc. */

這也適用於您使用 @layer utilities 指令在 CSS 中定義的任何自訂公用程式

/* Input */
@layer utilities {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd);
  }
}

/* Output */
.bg-brand-gradient {
  background-image: linear-gradient(#3490dc, #6574cd) !important;
}

​選擇器策略

將 important 設定為 true 可能會在整合將內嵌樣式新增到元素的第三方 JS 函式庫時造成一些問題。在這些情況下，Tailwind 的 !important 輔助工具會取代內嵌樣式，這可能會破壞您預期的設計。

為了解決此問題，您可以將 important 設定為 ID 選擇器，例如 #app

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  important: '#app',
}

此組態會為您的所有輔助工具加上給定的選擇器前綴，實際上會提高其特殊性，而不會實際讓它們成為 !important。

在您指定 important 選擇器後，您需要確保網站的根元素與其相符。使用上述範例，我們需要將根元素的 id 屬性設定為 app，才能讓樣式正常運作。

在您的組態全部設定完成，且您的根元素與 Tailwind 組態中的選擇器相符後，Tailwind 的所有輔助工具都會有足夠高的特殊性來取代專案中使用的其他類別，而不會干擾內嵌樣式

<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

在使用選擇器策略時，請務必確認包含根選擇器的範本檔案包含在您的內容組態中，否則在建置生產環境時，您的所有 CSS 都會被移除。

​重要修改器

或者，您可以在開頭加上 ! 字元，讓任何輔助工具都變得重要

<p class="!font-medium font-bold">
  This will be medium even though bold comes later in the CSS.
</p>

! 始終會出現在輔助工具名稱的開頭，在任何變體之後，但在任何前綴之前

<div class="sm:hover:!tw-font-bold">

在您需要提高特殊性，因為您正在與一些您無法控制的樣式作戰的罕見情況下，這可能會很有用。

​分隔符

separator 選項可讓您自訂用於將修改器（螢幕大小、hover、focus 等）與工具程式名稱（text-center、items-end 等）分隔的字元。

我們預設使用冒號 (:)，但如果您使用不支援類別名稱中特殊字元的範本語言（例如 Pug），變更這個設定會很有用。

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '_',
}

​核心外掛程式

corePlugins 區段可讓您完全停用 Tailwind 預設會產生的類別，如果您不需要它們來進行專案。

若要停用特定的核心外掛程式，請提供一個物件給 corePlugins，將那些外掛程式設定為 false

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

如果您想將哪些核心外掛程式列為安全清單，請提供一個陣列，其中包含您想使用的核心外掛程式清單

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

如果您想要停用所有 Tailwind 的核心外掛程式，並僅將 Tailwind 用作處理您自己的自訂外掛程式的工具，請提供一個空陣列

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: []
}

以下是所有核心外掛程式的清單，以供參考

​使用多種組態

對於需要使用不同 Tailwind 組態產生多個 CSS 檔案的專案，請使用 @config 指令來指定應為每個 CSS 進入點使用哪個組態檔案

@config "./tailwind.site.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

在 函式和指令 文件中深入了解 @config 指令。

​在 JavaScript 中參照

在您自己的用戶端 JavaScript 中參照您的組態值通常很有用，例如在 React 或 Vue 元件中動態套用內嵌樣式時存取一些您的佈景主題值。

為了簡化此操作，Tailwind 提供一個 resolveConfig 輔助函式，您可以使用它來產生組態物件的完全合併版本

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

請注意，這會遞移式地引入許多我們的建置時間相依關係，導致更大的用戶端套件大小。為避免這種情況，我們建議使用 babel-plugin-preval 等工具在建置時產生組態的靜態版本。

​TypeScript 類型

我們為 tailwind.config.js 檔案提供第一方的 TypeScript 類型，提供各種有用的 IDE 支援，讓您更容易變更設定，而無需經常參考文件。

使用 Tailwind CLI 產生的設定檔預設包含必要的類型註解，但若要手動設定 TypeScript 類型，只要在設定物件上方加入類型註解即可

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}