配置

由于 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。在将 Tailwind 与具有高特异性选择器的现有 CSS 一起使用时，这非常有用。

要将实用工具生成为 !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;
}

​选择器策略

在合并添加内联样式到元素的第三方 JS 库时，将 important 设置为 true 可能会带来一些问题。在这些情况下，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 都将被移除。

​Important 修饰符

或者，您可以在开头添加一个 ! 字符，以使任何实用程序变得重要

<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: [],
}