Tailwind CSS - 配置
Tailwind CSS 配置允许通过定义框架的各种方面（如 theme、colors、screen、plugin 等）来自定义框架，以满足项目需求，使用 'tailwind.config.js' 文件即可轻松实现。
如何生成配置文件？
以下是生成 'tailwind.config.js' 文件的逐步指导列表。
- Tailwind CSS 安装： 安装 Tailwind CSS 是必须首先完成的步骤。运行以下命令生成默认配置文件：
npm install tailwindcss
- 生成配置文件： 使用以下命令，即可轻松生成 'tailwind.config.js' 文件。
npx tailwind css init
- 生成的文件： 将生成以下文件。
自定义配置
'tailwind.config.js' 文件允许您轻松自定义配置，并使 utility classes 与项目的特定设计需求对齐。我们可以轻松自定义 theme、fonts、colors、screens、spacing、plugin 等，如下面所示。
- Content: 'tailwind.config.js' 文件的 content 部分使您能够添加所有包含 Tailwind CSS classes 的 HTML templates、JS components 和其他文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
// ...
}
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
}
}
}
'tailwind.config.js' 文件的 plugin 部分使您能够添加额外的 utilities、components、base styles、custom variants 等，如下面所示。
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('tailwindcss-children'),
],
}
/** @type {import('tailwindcss').Config} */
module.exports = {
prefix: 'tw-',
}
现在每个 class 都会带有配置的前缀生成：
.tw-text-left {
text-align: left;
}
.tw-text-center {
text-align: center;
}
.tw-text-right {
text-align: right;
}
/* 等 */
对于负值，请在您的 prefix 前添加连字符修饰符。例如，如果您的 prefix 是 tw-，则 -mt-8 会变成 -tw-mt-8。
<div class="-tw-mt-8"> <!-- --> </div>
注意： Prefix 只适用于 Tailwind 生成的 classes，不适用于您的自定义 classes。 要为自己的 utilities 添加 prefix，只需在 class 定义中添加 prefix：
@layer utilities {
.tw-bg-brand-gradient { /* ... */ }
}
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
}
现在所有的 Tailwind utility classes 都会作为 '!important' 生成：
.leading-none {
line-height: 1 !important;
}
.leading-tight {
line-height: 1.25 !important;
}
.leading-snug {
line-height: 1.375 !important;
}
/* 等 */
这也适用于您在 CSS 中使用 '@layer utilities' 指令创建的自定义 utilities。
/* 输入 */
@layer utilities {
.bg-brand-gradient {
background-image: linear-gradient(#3490dc, #6574cd);
}
}
/* 输出 */
.bg-brand-gradient {
background-image: linear-gradient(#3490dc, #6574cd) !important;
}
Selector strategy: 将 important 设置为 true 可能会与使用内联样式的第三方 JS libraries 产生冲突，因为 Tailwind 的 '!important' utilities 会覆盖它们并可能破坏您的设计。
要避免此问题，请遵循以下措施：
- 将 'important' 设置为 ID selector，如 '#app'。此配置会用给定的 selector 为您的 utilities 添加前缀，提高它们的 specificity，而不使用 '!important'。
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
important: '#app',
}
<html>
<!-- ... -->
<style>
.high-specificity .nested .selector {
color: blue;
}
</style>
<body id="app">
<div class="high-specificity">
<div class="nested">
<!-- 将是 red-500 -->
<div class="selector text-red-500"><!-- ... --></div>
</div>
</div>
<!-- 将是 #bada55 -->
<div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>
Important Modifier 您还可以通过在 utility 名称开头添加 '!' 来使其成为 important。 将 '!' 放在任何 variants 之后但 prefix 之前。这在您需要更多 specificity 来覆盖其他样式时很有帮助。
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
important: '#app',
}
您可以使用 corePlugins 部分来关闭任何您不需要的默认 Tailwind classes。
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
float: false,
objectFit: false,
objectPosition: false,
}
}
如果您想 safelist 应该启用的 core plugins，请将它们列在数组中。
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: [
'margin',
'padding',
'backgroundColor',
// ...
]
}
如果您想禁用所有 Tailwind 的 core plugins 并只使用您的自定义 plugins，请提供一个空数组。
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: []
}
以下是每个 core plugin 的参考列表：
| Core Plugin | 描述 |
|---|---|
| accentColor | 如 accent-green-800 的 accent-color utilities |
| accessibility | sr-only 和 not-sr-only utilities |
| alignContent | 如 content-between 的 align-content utilities |
| alignItems | 如 items-center 的 align-items utilities |
| alignSelf | 如 self-end 的 align-self utilities |
| animation | 如 animate-ping 的 animation utilities |
| appearance | 如 appearance-none 的 appearance utilities |
| aspectRatio | 如 aspect-square 的 aspect-ratio utilities |
| backdropBlur | 如 backdrop-blur-md 的 backdrop-blur utilities |
| backdropBrightness | 如 backdrop-brightness-100 的 backdrop-brightness utilities |
| backdropContrast | 如 backdrop-contrast-100 的 backdrop-contrast utilities |
| backdropFilter | 如 backdrop-filter 的 backdrop-filter utilities |
| backdropGrayscale | 如 backdrop-grayscale-0 的 backdrop-grayscale utilities |
| backdropHueRotate | 如 backdrop-hue-rotate-30 的 backdrop-hue-rotate utilities |
| backdropInvert | 如 backdrop-invert-0 的 backdrop-invert utilities |
| backdropOpacity | 如 backdrop-opacity-50 的 backdrop-opacity utilities |
| backdropSaturate | 如 backdrop-saturate-100 的 backdrop-saturate utilities |
| backdropSepia | 如 backdrop-sepia-0 的 backdrop-sepia utilities |
| backgroundAttachment | 如 bg-local 的 background-attachment utilities |
| backgroundBlendMode | 如 bg-blend-color-burn 的 background-blend-mode utilities |
| backgroundClip | 如 bg-clip-padding 的 background-clip utilities |
| backgroundColor | 如 bg-green-800 的 background-color utilities |
| backgroundImage | 设置多个配置文件对于拥有多个 CSS 文件和不同 Tailwind 设置的项目，使用 @config 指令为每个 CSS 文件选择配置文件。 @config "./tailwind.site.config.js"; @tailwind base; @tailwind components; @tailwind utilities; 在 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)' TypeScript 类型Tailwind CLI 会自动添加类型，但如果你需要手动添加，请在配置文件上方添加一行。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
],
theme: {
extend: {},
},
plugins: [],
}
|