配置

配置和定制 Tailwind 安裝的指南。

因為 Tailwind 是一個構建定制用戶界面的框架，所以從開始設計時便考慮了定制。

默認情況下，Tailwind 將在項目的根目錄中查找一個可選的 ?tailwind.config.js? 的文件，您可以在其中定義任何自定義選項。

// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}

配置文件的每個部分都是可選的，因此您只需指定要更改的內容即可。任何缺少的部分將會使用 Tailwind 的 默認配置。

創(chuàng)建配置文件

使用 Tailwind CLI 功能生成 Tailwind 配置文件，Tailwind CLI 在您安裝 ?tailwindcss? npm 軟件包時已經(jīng)附帶安裝過。

npx tailwindcss init

這將在項目的根目錄下創(chuàng)建一個最小文件 ?tailwind.config.js?：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

使用其它文件名

要使用 ?tailwind.config.js? 之外的文件名，請在命令行中將其做為參數(shù)傳入：

npx tailwindcss init tailwindcss-config.js

如果使用自定義文件名，則在 PostCSS 配置中將 Tailwind 做為插件引入時，也需要指定它：

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

創(chuàng)建 PostCSS 配置文件

如果您想在生成 ?tailwind.config.js? 文件的同時也生成一個基礎的 ?postcss.config.js? 文件，請使用 ?-p? 標志。

npx tailwindcss init -p

這將在您的項目中生成一個 ?postcss.config.js? 文件，如下所示：

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

生成全部默認配置

對于大多數(shù)用戶，我們建議您盡量減少配置文件，只指定您想自定義的內容。

如果您希望構建一個完整的配置文件，其中包括 Tailwind的 所有默認配置，請使用以下 ?--full? 選項：

npx tailwindcss init --full

您將得到一個與 Tailwind 內部使用的 默認配置文件 一致的文件。

主題

在 ?theme ?部分中，您可以定義調色板、字體、類型比例、邊框大小、斷點等任何與您網(wǎng)站視覺設計有關的東西。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

變體

?variants ?部分允許您控制為每個核心功能插件生成哪些 變體 。

// tailwind.config.js
module.exports = {
  variants: {
    fill: [],
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}

插件

?plugins ?部分允許您向 Tailwind 注冊插件，這些插件可用于生成額外功能類、組件、基本樣式或自定義變體。

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

預設

?presets ?部分允許您指定自己的自定義基本配置，來替代 Tailwind 的默認基本配置。

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

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

前綴

?prefix ?選項允許您為所有 Tailwind 生成的功能類添加一個自定義前綴。當 Tailwind 和一個已有的 CSS 存在命名沖突時，這個功能會非常有用。

例如，您可以通過這樣設置來添加 ?tw-? 前綴：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

現(xiàn)在，將使用配置的前綴生成每個類。

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

請一定要理解，這個前綴是在任何變體前綴之后添加的。這意味著，帶有響應式或者狀態(tài)前綴（如 ?sm:? or ?hover:?）的類仍然會最先出現(xiàn)，自定義前綴要寫在冒號后面。

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

前綴僅會被添加到 Tailwind 生成的類中；您自己的自定義類中將不會被添加前綴。

這意味著，如果您像這樣添加自己的響應式功能類：

@variants hover {
  .bg-brand-gradient { /* ... */ }
}

生成的響應式類將不會帶有您配置的前綴：

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

如果您也想給您自己的功能類添加前綴，只需要把前綴添加到類定義中即可：

@variants hover {
  .tw-bg-brand-gradient { /* ... */ }
}

Important

?important ?選項允許您控制是否將 Tailwind 的功能類標記為 ?!important?。當您將 Tailwind 與已存在的具有非常特殊的選擇器的 CSS 一起使用時，這可能會非常有用。

要生成 ?!important? 的功能類，在您的配置選項中把 ?important ?鍵設置為 ?true?：

// tailwind.config.js
module.exports = {
  important: true,
}

現(xiàn)在，所有的 Tailwind 功能類都將被生成 ?!important?：

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

注意：啟用此選項不會將您的任何自定義功能類標記為 ?!important?。

如果您想把自己的功能也標記為 ?!important?，只需要自己在每個聲明末尾添加 ?!important?：

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

選擇器策略

在合并第三方 JS 庫且這些庫會為您的元素添加內聯(lián)樣式的時候，設置 ?important ?為 ?true ?會引入一些問題。在這種情況下，Tailwind 的 ?!important? 功能會覆蓋內聯(lián)樣式，這會破壞您的預期設計。

為了解決這個問題，您可以為一個 ID 選擇器設置 ?important?，比如 ?#app?：

// tailwind.config.js
module.exports = {
  important: '#app',
}

這個配置將在您所有的功能類前加上給定的選擇器，有效地增加它們的特殊性，而實際上并沒有使它們變得 ?!important?。

當您指定了 ?important ?選擇器后，您需要確保您的網(wǎng)站的根元素與之匹配。 使用上面的例子，我們需要將根元素的 ?id ?屬性設置為 ?app?，以使樣式正常工作。

當您的配置都設置好，且您的根元素與 Tailwind 配置中的選擇器相匹配后，Tailwind 的所有功能類將有足夠高的特異性來擊敗您的項目中使用的其他類，但并不干擾內聯(lián)樣式。

<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>

使用選擇器策略時，請確保包含根選擇器的模板文件包含在 purge configuration 中，否則在構建生產(chǎn)環(huán)境時將刪除所有 CSS。

分隔符

?separator ?選項可以讓您自定義應該使用什么字符或字符串來分隔變體前綴（屏幕大小、?hover?、?focus?等）和類名（?text-center?、?items-end?等）。

我們默認使用冒號(?:?)，但是如果您使用的是像 Pug 這樣的模板語言，不支持在類名中使用特殊字符，那么改變這個冒號就會很有用。

// tailwind.config.js
module.exports = {
  separator: '_',
}

變體順序

如果您使用 ?extend ?功能啟用額外的變體，這些變體會自動排序，以遵守合理的默認變體順序。

如果有必要，您可以在 ?variantOrder ?鍵下面自定義變體順序：

// tailwind.config.js
module.exports = {
  // ...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'disabled',
  ]
}

核心插件

?corePlugins ?部分允許您完全禁用掉那些 Tailwind 默認生成的類，如果您的項目不需要。

如果您沒有提供任何 ?corePlugins ?配置，則默認情況下將啟用所有的核心插件。

// tailwind.config.js
module.exports = {
  // ...
}

如果您想禁用特定的核心插件，為 ?corePlugins ?提供一個對象，將這些插件設置為?false?。

// tailwind.config.js
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

如果您想安全地列出哪些核心插件應該被啟用，請?zhí)峁┮粋€數(shù)組，其中包括您想使用的核心插件的列表。

// tailwind.config.js
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

如果您想禁用所有 Tailwind 的核心插件，并簡單地使用 Tailwind 作為處理您自己的自定義插件的工具，那么只需提供一個空數(shù)組。

// tailwind.config.js
module.exports = {
  corePlugins: []
}

下面是每個核心插件的列表，供參考：

在 JavaScript 中引用

在您的客戶端 JavaScript 中引用配置的值往往非常有用。例如，在 React 或者 Vue 組件中動態(tài)應用內聯(lián)樣式的時候需要獲取您的主題的配置值。

為了簡化此操作，Tailwind 提供了一個 ?resolveConfig ?助手函數(shù)，可以用來生成一個配置對象的完全合并的版本：

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 的工具在構建時生成配置的靜態(tài)版本。