配置

配置和定制您的Tailwind安装指南。

因为 Tailwind 是一个用于构建定制用户界面的框架，它从头开始就考虑了定制化。

默认情况下，Tailwind 会在项目根目录中寻找一个可选的 tailwind.config.js 文件，您可以在其中定义任何自定义内容。

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 配置文件：

shell

npx tailwindcss init

这将在您的项目根目录创建一个最小的 tailwind.config.js 文件：

tailwind.config.js

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

使用不同的文件名

若要使用除 tailwind.config.js 之外的名称，请将其作为命令行参数传递：

shell

npx tailwindcss init tailwindcss-config.js

当您使用自定义文件名时，您需要在使用 Tailwind CLI 工具编译 CSS 时将其指定为命令行参数：

shell

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

如果您正在使用 Tailwind 作为 PostCSS 插件，您需要在 PostCSS 配置中指定您的自定义配置路径：

postcss.config.js

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

或者，您可以使用 @config 指令来指定自定义配置路径：

css

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

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

在函数和指令文档中了解更多关于 @config 指令的信息。

使用 ESM 或 TypeScript

您还可以在 ESM 或甚至 TypeScript 中配置 Tailwind CSS：

tailwind.config.jstailwind.config.ts

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

typescript

import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

当您运行 npx tailwindcss init 时，我们将检测您的项目是否为 ES 模块，并自动生成具有正确语法的配置文件。

您还可以使用 --esm 标志显式生成一个ESM配置文件：

npx tailwindcss init --esm

生成 TypeScript 配置文件，请使用 --ts 标志：

npx tailwindcss init --ts

生成一个 PostCSS 配置文件

如果您想同时生成一个基本的 postcss.config.js 文件和您的 tailwind.config.js 文件，可以使用 -p 标志

shell

npx tailwindcss init -p

这将在您的项目中生成一个 postcss.config.js 文件，看起来像这样：

postcss.config.js

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

搭建整个默认配置

对于大多数用户，我们鼓励您尽可能保持配置文件的最小化，并只指定您想要自定义的内容。

如果您更喜欢生成一个包含 Tailwind 的所有默认配置的完整配置文件，请使用 --full 选项：

shell

npx tailwindcss init --full

您将获得一个与 Tailwind 内部使用的默认配置文件相匹配的文件。

配置选项

内容

content 部分是您配置所有 HTML 模板、JS 组件以及包含 Tailwind 类名的其他文件路径的地方。

tailwind.config.js

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

在内容配置文档中了解更多关于配置您的内容来源的信息。

主题

theme 部分是您定义颜色调色板、字体、字体比例、边框大小、断点等与网站视觉设计相关的内容。

tailwind.config.js

/** @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 注册插件，这些插件可用于生成额外的实用程序、组件、基本样式或自定义变体。

tailwind.config.js

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

在插件作者指南中了解更多关于编写自己的插件的信息。

预设

presets 部分允许您指定自定义基本配置，而不是使用 Tailwind 的默认基本配置。

tailwind.config.js

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

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

在预设文档中了解更多关于预设的信息。

前缀

选项 prefix 允许您向 Tailwind 生成的所有实用程序类添加自定义前缀。当在现有 CSS 的基础上叠加 Tailwind 时，可能会出现命名冲突，这时这个功能就非常有用。

例如，您可以通过设置 prefix 选项来添加 tw- 前缀。

tailwind.config.js

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

现在每个类都将使用配置的前缀生成：

css

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

重要的是要理解，这个前缀是在任何变体修饰符之后添加的。这意味着具有响应或状态修饰符的类，如 sm: 或 hover: ，仍然会先出现响应或状态修饰符，然后是您自定义的前缀出现在冒号后面：

html

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

html

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

前缀仅添加到由Tailwind生成的类；不会向您自定义的类添加前缀。

这意味着如果您添加自己的自定义实用程序，就像这样：

css

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

...生成的变体不会带有您配置的前缀：

css

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

如果您想要为自己的实用程序添加前缀，只需将前缀添加到类定义中：

css

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

重要

选项允许您控制是否应该使用 !important 标记 Tailwind 的实用程序。当与具有高特异性选择器的现有 CSS 一起使用 Tailwind 时，这可能非常有用。

要将实用程序生成为 !important ，请将配置选项中的 important 键设置为 true ：

tailwind.config.js

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

现在所有Tailwind的实用类将生成为 !important ：

css

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

这也适用于您在 CSS 中使用 @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 ：

tailwind.config.js

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

此配置将使用给定的选择器为所有实用程序添加前缀，从而有效地增加它们的特异性，而不实际使它们 !important 。

在指定 important 选择器之后，您需要确保站点的根元素与其匹配。使用上面的示例，我们需要将站点的根元素的 id 属性设置为 app ，以便样式能够正常工作。

在您的配置全部设置好并且根元素与您的 Tailwind 配置中的选择器匹配之后，Tailwind 的所有工具类将具有足够高的特异性，可以击败项目中使用的其他类，而不会干扰内联样式。

html

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

重要的修饰符

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

html

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

! 始终位于实用程序名称的开头，位于任何变体之后，但位于任何前缀之前：

html

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

在罕见情况下，当您需要增加特异性时，这可能是有用的，因为您正在与一些您无法控制的样式作斗争。

分隔符

separator 选项允许您自定义用于将修饰符（屏幕尺寸， hover ， focus 等）与实用程序名称（ text-center ， items-end 等）分隔的字符。

我们默认使用冒号（ : ），但如果您使用像 Pug 这样不支持类名中的特殊字符的模板语言，更改这一点可能会很有用。

tailwind.config.js

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

核心插件

corePlugins 部分允许您完全禁用 Tailwind 在您的项目中不需要的默认生成的类。

要禁用特定的核心插件，请为 corePlugins 提供一个对象，将这些插件设置为 false 。

tailwind.config.js

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

如果您想要将应启用的核心插件列入白名单，请提供一个包含您想要使用的核心插件列表的数组：

tailwind.config.js

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

如果您想禁用Tailwind的所有核心插件，并仅将Tailwind作为处理自定义插件的工具，请提供一个空数组：

tailwind.config.js

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

这是每个核心插件的参考列表：

Core Plugin	Description
`accentColor`	像 `accent-color` 这样的实用工具 `accent-green-800`
`accessibility`	`sr-only` 和 `not-sr-only` 这样的实用工具
`alignContent`	像 `align-content` 这样的实用工具 `content-between`
`alignItems`	像 `align-items` 这样的实用工具 `items-center`
`alignSelf`	像 `align-self` 这样的实用工具 `self-end`
`animation`	像 `animation` 这样的实用工具 `animate-ping`
`appearance`	像 `appearance` 这样的实用工具 `appearance-none`
`aspectRatio`	像 `aspect-ratio` 这样的实用工具 `aspect-square`
`backdropBlur`	像 `backdrop-blur` 这样的实用工具 `backdrop-blur-md`
`backdropBrightness`	像 `backdrop-brightness` 这样的实用工具 `backdrop-brightness-100`
`backdropContrast`	像 `backdrop-contrast` 这样的实用工具 `backdrop-contrast-100`
`backdropFilter`	像 `backdrop-filter` 这样的实用工具，比如 `backdrop-filter`
`backdropGrayscale`	像 `backdrop-grayscale` 这样的实用工具 `backdrop-grayscale-0`
`backdropHueRotate`	像 `backdrop-hue-rotate` 这样的实用工具 `backdrop-hue-rotate-30`
`backdropInvert`	像 `backdrop-invert` 这样的实用工具 `backdrop-invert-0`
`backdropOpacity`	像 `backdrop-opacity` 这样的实用工具 `backdrop-opacity-50`
`backdropSaturate`	像 `backdrop-saturate` 这样的实用工具 `backdrop-saturate-100`
`backdropSepia`	像 `backdrop-sepia` 这样的实用工具 `backdrop-sepia-0`
`backgroundAttachment`	像 `background-attachment` 这样的实用工具 `bg-local`
`backgroundBlendMode`	像 `background-blend-mode` 这样的实用工具 `bg-blend-color-burn`
`backgroundClip`	像 `background-clip` 这样的实用工具 `bg-clip-padding`
`backgroundColor`	像 `background-color` 这样的实用工具 `bg-green-800`
`backgroundImage`	像 `background-image` 这样的实用工具 `bg-gradient-to-br`
`backgroundOpacity`	像`background-color` 不透明度实用程序，如 `bg-opacity-25`
`backgroundOrigin`	像 `background-origin` 这样的实用工具 `bg-origin-padding`
`backgroundPosition`	像 `background-position` 这样的实用工具 `bg-left-top`
`backgroundRepeat`	像 `background-repeat` 这样的实用工具 `bg-repeat-x`
`backgroundSize`	像 `background-size` 这样的实用工具 `bg-cover`
`blur`	像 `blur` 这样的实用工具 `blur-md`
`borderCollapse`	像 `border-collapse` 这样的实用工具 `border-collapse`
`borderColor`	像 `border-color` 这样的实用工具 `border-e-green-800`
`borderOpacity`	像`border-color` 不透明度实用程序，如 `border-opacity-25`
`borderRadius`	像 `border-radius` 这样的实用工具 `rounded-ss-lg`
`borderSpacing`	像 `border-spacing` 这样的实用工具 `border-spacing-x-28`
`borderStyle`	像 `border-style` 这样的实用工具 `border-dotted`
`borderWidth`	像 `border-width` 这样的实用工具 `border-e-4`
`boxDecorationBreak`	像 `box-decoration-break` 这样的实用工具 `decoration-clone`
`boxShadow`	像 `box-shadow` 这样的实用工具 `shadow-lg`
`boxShadowColor`	像 `box-shadow-color` 这样的实用工具 `shadow-green-800`
`boxSizing`	像 `box-sizing` 这样的实用工具 `box-border`
`breakAfter`	像 `break-after` 这样的实用工具 `break-after-avoid-page`
`breakBefore`	像 `break-before` 这样的实用工具 `break-before-avoid-page`
`breakInside`	像 `break-inside` 这样的实用工具 `break-inside-avoid`
`brightness`	像 `brightness` 这样的实用工具 `brightness-100`
`captionSide`	像 `caption-side` 这样的实用工具 `caption-top`
`caretColor`	像 `caret-color` 这样的实用工具 `caret-green-800`
`clear`	像 `clear` 这样的实用工具 `clear-left`
`columns`	像 `columns` 这样的实用工具 `columns-auto`
`container`	组件 `container`
`content`	像 `content` 这样的实用工具 `content-none`
`contrast`	像 `contrast` 这样的实用工具 `contrast-100`
`cursor`	像 `cursor` 这样的实用工具 `cursor-grab`
`display`	像 `display` 这样的实用工具 `table-column-group`
`divideColor`	元素之间的 `border-color` 实用程序，如 `divide-slate-500`
`divideOpacity`	像 `divide-opacity` 这样的实用工具 `divide-opacity-50`
`divideStyle`	像 `divide-style` 这样的实用工具 `divide-dotted`
`divideWidth`	元素之间的 `border-width` 实用程序，如 `divide-x-2`
`dropShadow`	像 `drop-shadow` 这样的实用工具 `drop-shadow-lg`
`fill`	像 `fill` 这样的实用工具 `fill-green-700`
`filter`	像 `filter` 这样的实用工具 `filter`
`flex`	像 `flex` 这样的实用工具 `flex-auto`
`flexBasis`	像 `flex-basis` 这样的实用工具 `basis-px`
`flexDirection`	像 `flex-direction` 这样的实用工具 `flex-row-reverse`
`flexGrow`	像 `flex-grow` 这样的实用工具 `flex-grow`
`flexShrink`	像 `flex-shrink` 这样的实用工具 `flex-shrink`
`flexWrap`	像 `flex-wrap` 这样的实用工具 `flex-wrap-reverse`
`float`	像 `float` 这样的实用工具 `float-right`
`fontFamily`	像 `font-family` 这样的实用工具 `font-serif`
`fontSize`	像 `font-size` 这样的实用工具 `text-3xl`
`fontSmoothing`	像 `font-smoothing` 这样的实用工具 `antialiased`
`fontStyle`	像 `font-style` 这样的实用工具 `italic`
`fontVariantNumeric`	像 `font-variant-numeric` 这样的实用工具 `oldstyle-nums`
`fontWeight`	像 `font-weight` 这样的实用工具 `font-medium`
`forcedColorAdjust`	像 `forced-color-adjust` 这样的实用工具 `forced-color-adjust-auto`
`gap`	像 `gap` 这样的实用工具 `gap-x-28`
`gradientColorStops`	像 `gradient-color-stops` 这样的实用工具 `via-emerald-700`
`grayscale`	像 `grayscale` 这样的实用工具 `grayscale-0`
`gridAutoColumns`	像 `grid-auto-columns` 这样的实用工具 `auto-cols-min`
`gridAutoFlow`	像 `grid-auto-flow` 这样的实用工具 `grid-flow-dense`
`gridAutoRows`	像 `grid-auto-rows` 这样的实用工具 `auto-rows-min`
`gridColumn`	像 `grid-column` 这样的实用工具 `col-span-6`
`gridColumnEnd`	像 `grid-column-end` 这样的实用工具 `col-end-7`
`gridColumnStart`	像 `grid-column-start` 这样的实用工具 `col-start-7`
`gridRow`	像 `grid-row` 这样的实用工具 `row-span-6`
`gridRowEnd`	像 `grid-row-end` 这样的实用工具 `row-end-7`
`gridRowStart`	像 `grid-row-start` 这样的实用工具 `row-start-7`
`gridTemplateColumns`	像 `grid-template-columns` 这样的实用工具 `grid-cols-7`
`gridTemplateRows`	像 `grid-template-rows` 这样的实用工具 `grid-rows-7`
`height`	像 `height` 这样的实用工具 `h-96`
`hueRotate`	像 `hue-rotate` 这样的实用工具 `hue-rotate-30`
`hyphens`	像 `hyphens` 这样的实用工具 `hyphens-manual`
`inset`	像 `inset` 这样的实用工具 `end-44`
`invert`	像 `invert` 这样的实用工具 `invert-0`
`isolation`	像 `isolation` 这样的实用工具 `isolate`
`justifyContent`	像 `justify-content` 这样的实用工具 `justify-center`
`justifyItems`	像 `justify-items` 这样的实用工具 `justify-items-end`
`justifySelf`	像 `justify-self` 这样的实用工具 `justify-self-end`
`letterSpacing`	像 `letter-spacing` 这样的实用工具 `tracking-normal`
`lineClamp`	像 `line-clamp` 这样的实用工具 `line-clamp-4`
`lineHeight`	像 `line-height` 这样的实用工具 `leading-9`
`listStyleImage`	像 `list-style-image` 这样的实用工具 `list-image-none`
`listStylePosition`	像 `list-style-position` 这样的实用工具 `list-inside`
`listStyleType`	像 `list-style-type` 这样的实用工具 `list-disc`
`margin`	像 `margin` 这样的实用工具 `me-28`
`maxHeight`	像 `max-height` 这样的实用工具 `max-h-44`
`maxWidth`	像 `max-width` 这样的实用工具 `max-w-80`
`minHeight`	像 `min-height` 这样的实用工具 `min-h-44`
`minWidth`	像 `min-width` 这样的实用工具 `min-w-36`
`mixBlendMode`	像 `mix-blend-mode` 这样的实用工具 `mix-blend-hard-light`
`objectFit`	像 `object-fit` 这样的实用工具 `object-fill`
`objectPosition`	像 `object-position` 这样的实用工具 `object-left-top`
`opacity`	像 `opacity` 这样的实用工具 `opacity-50`
`order`	像 `order` 这样的实用工具 `order-8`
`outlineColor`	像 `outline-color` 这样的实用工具 `outline-green-800`
`outlineOffset`	像 `outline-offset` 这样的实用工具 `outline-offset-2`
`outlineStyle`	像 `outline-style` 这样的实用工具 `outline-dashed`
`outlineWidth`	像 `outline-width` 这样的实用工具 `outline-2`
`overflow`	像 `overflow` 这样的实用工具 `overflow-x-hidden`
`overscrollBehavior`	像 `overscroll-behavior` 这样的实用工具 `overscroll-y-contain`
`padding`	像 `padding` 这样的实用工具 `pe-28`
`placeContent`	像 `place-content` 这样的实用工具 `place-content-between`
`placeItems`	像 `place-items` 这样的实用工具 `place-items-center`
`placeSelf`	像 `place-self` 这样的实用工具 `place-self-end`
`placeholderColor`	像 `placeholder-color` 这样的占位符实用程序 `placeholder-red-600`
`placeholderOpacity`	像 `placeholder-opacity-25` 这样的占位符不透明度实用程序
`pointerEvents`	像 `pointer-events` 这样的实用工具 `pointer-events-none`
`position`	像 `position` 这样的实用工具 `absolute`
`preflight`	Tailwind 的基础/重置样式
`resize`	像 `resize` 这样的实用工具 `resize-y`
`ringColor`	像 `ring-color` 这样的实用工具 `ring-green-800`
`ringOffsetColor`	像 `ring-offset-color` 这样的实用工具 `ring-offset-green-800`
`ringOffsetWidth`	像 `ring-offset-width` 这样的实用工具 `ring-offset-2`
`ringOpacity`	像 `ring-opacity` 这样的实用工具 `ring-opacity-50`
`ringWidth`	像 `ring-width` 这样的实用工具 `ring-4`
`rotate`	像 `rotate` 这样的实用工具 `rotate-6`
`saturate`	像 `saturate` 这样的实用工具 `saturate-100`
`scale`	像 `scale` 这样的实用工具 `scale-x-95`
`scrollBehavior`	像 `scroll-behavior` 这样的实用工具 `scroll-auto`
`scrollMargin`	像 `scroll-margin` 这样的实用工具 `scroll-me-28`
`scrollPadding`	像 `scroll-padding` 这样的实用工具 `scroll-pe-28`
`scrollSnapAlign`	像 `scroll-snap-align` 这样的实用工具 `snap-end`
`scrollSnapStop`	像 `scroll-snap-stop` 这样的实用工具 `snap-normal`
`scrollSnapType`	像 `scroll-snap-type` 这样的实用工具 `snap-y`
`sepia`	像 `sepia` 这样的实用工具 `sepia-0`
`size`	像 `size` 这样的实用工具 `size-0.5`
`skew`	像 `skew` 这样的实用工具 `skew-x-12`
`space`	`space-between` 实用程序，如 `space-x-4`
`stroke`	像 `stroke` 这样的实用工具 `stroke-green-700`
`strokeWidth`	像 `stroke-width` 这样的实用工具 `stroke-1`
`tableLayout`	像 `table-layout` 这样的实用工具 `table-auto`
`textAlign`	像 `text-align` 这样的实用工具 `text-right`
`textColor`	像 `text-color` 这样的实用工具 `text-green-800`
`textDecoration`	像 `text-decoration` 这样的实用工具 `overline`
`textDecorationColor`	像 `text-decoration-color` 这样的实用工具 `decoration-green-800`
`textDecorationStyle`	像 `text-decoration-style` 这样的实用工具 `decoration-dotted`
`textDecorationThickness`	像 `text-decoration-thickness` 这样的实用工具 `decoration-4`
`textIndent`	像 `text-indent` 这样的实用工具 `indent-28`
`textOpacity`	像 `text-opacity` 这样的实用工具 `text-opacity-50`
`textOverflow`	像 `text-overflow` 这样的实用工具 `overflow-ellipsis`
`textTransform`	像 `text-transform` 这样的实用工具 `lowercase`
`textUnderlineOffset`	像 `text-underline-offset` 这样的实用工具 `underline-offset-2`
`textWrap`	像 `text-wrap` 这样的实用工具 `text-nowrap`
`touchAction`	像 `touch-action` 这样的实用工具 `touch-pan-right`
`transform`	`transform` 实用程序（用于启用变换功能）
`transformOrigin`	像 `transform-origin` 这样的实用工具 `origin-bottom-right`
`transitionDelay`	像 `transition-delay` 这样的实用工具 `delay-200`
`transitionDuration`	像 `transition-duration` 这样的实用工具 `duration-200`
`transitionProperty`	像 `transition-property` 这样的实用工具 `transition-colors`
`transitionTimingFunction`	像 `transition-timing-function` 这样的实用工具 `ease-in`
`translate`	像 `translate` 这样的实用工具 `translate-x-full`
`userSelect`	像 `user-select` 这样的实用工具 `select-text`
`verticalAlign`	像 `vertical-align` 这样的实用工具 `align-bottom`
`visibility`	像 `visibility` 这样的实用工具 `invisible`
`whitespace`	像 `whitespace` 这样的实用工具 `whitespace-pre`
`width`	像 `width` 这样的实用工具 `w-2.5`
`willChange`	像 `will-change` 这样的实用工具 `will-change-scroll`
`wordBreak`	像 `word-break` 这样的实用工具 `break-words`
`zIndex`	像 `z-index` 这样的实用工具 `z-30`

使用多个配置

对于需要使用不同的 Tailwind 配置生成多个 CSS 文件的项目，请使用 @config 指令来指定每个 CSS 入口点应该使用哪个配置文件：

site.cssadmin.css

css

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

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

css

@config "./tailwind.admin.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 类型，只需在配置对象上方添加类型注释：

tailwind.config.js

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

配置 ​

创建您的配置文件 ​

使用不同的文件名 ​

使用 ESM 或 TypeScript ​

生成一个 PostCSS 配置文件 ​

搭建整个默认配置 ​

配置选项 ​

内容 ​

主题 ​

插件 ​

预设 ​

前缀 ​

重要 ​

选择器策略 ​

重要的修饰符 ​

分隔符 ​

核心插件 ​

使用多个配置 ​

JavaScript 中的引用 ​

TypeScript 类型 ​

配置

创建您的配置文件

使用不同的文件名

使用 ESM 或 TypeScript

生成一个 PostCSS 配置文件

搭建整个默认配置

配置选项

内容

主题

插件

预设

前缀

重要

选择器策略

重要的修饰符

分隔符

核心插件

使用多个配置

JavaScript 中的引用

TypeScript 类型