Tailwind CSS 配置

配置

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

因?yàn)?nbsp;Tailwind 是一個(gè)構(gòu)建定制用戶界面的框架，所以從開始設(shè)計(jì)時(shí)便考慮了定制。

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

// 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'],
    }
  }
}

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

創(chuàng)建配置文件

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

npx tailwindcss init

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

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

使用其它文件名

要使用 ?tailwind.config.js? 之外的文件名，請(qǐng)?jiān)诿钚兄袑⑵渥鰹閰?shù)傳入：

npx tailwindcss init tailwindcss-config.js

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

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

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

如果您想在生成 ?tailwind.config.js? 文件的同時(shí)也生成一個(gè)基礎(chǔ)的 ?postcss.config.js? 文件，請(qǐng)使用 ?-p? 標(biāo)志。

npx tailwindcss init -p

這將在您的項(xiàng)目中生成一個(gè) ?postcss.config.js? 文件，如下所示：

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

生成全部默認(rèn)配置

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

如果您希望構(gòu)建一個(gè)完整的配置文件，其中包括 Tailwind的 所有默認(rèn)配置，請(qǐng)使用以下 ?--full? 選項(xiàng)：

npx tailwindcss init --full

您將得到一個(gè)與 Tailwind 內(nèi)部使用的 默認(rèn)配置文件 一致的文件。

主題

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

// 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 ?部分允許您控制為每個(gè)核心功能插件生成哪些 變體 。

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

插件

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

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

預(yù)設(shè)

?presets ?部分允許您指定自己的自定義基本配置，來(lái)替代 Tailwind 的默認(rèn)基本配置。

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

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

前綴

?prefix ?選項(xiàng)允許您為所有 Tailwind 生成的功能類添加一個(gè)自定義前綴。當(dāng) Tailwind 和一個(gè)已有的 CSS 存在命名沖突時(shí)，這個(gè)功能會(huì)非常有用。

例如，您可以通過(guò)這樣設(shè)置來(lái)添加 ?tw-? 前綴：

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

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

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

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

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

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

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

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

生成的響應(yīng)式類將不會(huì)帶有您配置的前綴：

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

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

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

Important

?important ?選項(xiàng)允許您控制是否將 Tailwind 的功能類標(biāo)記為 ?!important?。當(dāng)您將 Tailwind 與已存在的具有非常特殊的選擇器的 CSS 一起使用時(shí)，這可能會(huì)非常有用。

要生成 ?!important? 的功能類，在您的配置選項(xiàng)中把 ?important ?鍵設(shè)置為 ?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. */

注意：?jiǎn)⒂么诉x項(xiàng)不會(huì)將您的任何自定義功能類標(biāo)記為 ?!important?。

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

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

選擇器策略

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

為了解決這個(gè)問(wèn)題，您可以為一個(gè) ID 選擇器設(shè)置 ?important?，比如 ?#app?：

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

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

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

當(dāng)您的配置都設(shè)置好，且您的根元素與 Tailwind 配置中的選擇器相匹配后，Tailwind 的所有功能類將有足夠高的特異性來(lái)?yè)魯∧捻?xiàng)目中使用的其他類，但并不干擾內(nèi)聯(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>

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

分隔符

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

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

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

變體順序

如果您使用 ?extend ?功能啟用額外的變體，這些變體會(huì)自動(dòng)排序，以遵守合理的默認(rèn)變體順序。

如果有必要，您可以在 ?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 默認(rèn)生成的類，如果您的項(xiàng)目不需要。

如果您沒(méi)有提供任何 ?corePlugins ?配置，則默認(rèn)情況下將啟用所有的核心插件。

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

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

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

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

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

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

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

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

在 JavaScript 中引用

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

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

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

請(qǐng)注意，這將傳遞大量我們的構(gòu)建時(shí)依賴項(xiàng)，從而導(dǎo)致更大的捆綁客戶端大小。為避免這種情況，我們建議使用類似 babel-plugin-preval 的工具在構(gòu)建時(shí)生成配置的靜態(tài)版本。