Tailwind CSS - 配置

Tailwind CSS 配置允许通过定义框架的各个方面（例如主题、颜色、屏幕、插件等）来轻松根据项目需求自定义框架，使用 'tailwind.config.js' 文件。

如何生成配置文件？

以下是生成 'tailwind.config.js' 文件的分步指南。

Tailwind CSS 安装： Tailwind CSS 的安装是必须首先完成的步骤。运行以下命令以生成默认配置文件
```
npm install tailwindcss
```
生成配置文件： 使用以下命令，可以轻松生成 'tailwind.config.js' 文件。
```
npx tailwind css init
```
生成的文件： 将生成以下文件。

自定义配置

'tailwind.config.js' 文件允许轻松自定义配置并将实用程序类与项目的特定设计要求对齐。我们可以轻松自定义主题、字体、颜色、屏幕、间距、插件等等，如下所示。

内容： 'tailwind.config.js' 文件的内容部分使您可以添加所有 HTML 模板、JS 组件以及包含 Tailwind CSS 类的其他文件的路径。

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

主题： 'tailwind.config.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' 文件的插件部分使您可以添加额外的实用程序、组件、基础样式、自定义变体等等，如下所示。

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

前缀： 'tailwind.config.js' 文件的前缀部分允许您向所有实用程序类添加自定义前缀，有助于减少命名冲突，如下所示。

/** @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. */

在您的前缀之前添加破折号修饰符以表示负值。例如，如果您的前缀是 tw-，则 -mt-8 将变为 -tw-mt-8。

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

注意： 前缀仅适用于 Tailwind 生成的类，不适用于您的自定义类。要为自己的实用程序添加前缀，只需将前缀添加到类定义即可。

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

重要： important 选项允许您使用“!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. */

这也适用于您使用 CSS 中的“@layer utilities”指令创建的自定义实用程序。

/* 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'。此配置会在您的实用程序前面添加给定的选择器，从而提高其特异性，而无需使用 '!important'。

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

为确保样式正常工作，请为网站的根元素设置与重要选择器相同的 ID，例如 id="app"。

<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 都会被删除。

重要修饰符：您也可以通过在实用程序名称的开头添加“!”来使其成为重要修饰符。“!”应放在任何变体之后，但任何前缀之前。当您需要更高的特异性来覆盖其他样式时，这很有帮助。

分隔符：分隔符选项允许您选择一个字符来分隔修饰符（如屏幕尺寸、悬停）与实用程序名称（例如，text-center）。默认情况下，它使用冒号 (:)，但您可以为不支持特殊字符的模板语言（如 Pug）更改它。

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

核心插件：您可以使用 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 的核心插件，只使用自定义插件，请提供一个空数组。

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

以下是每个核心插件的列表，供参考

核心插件	描述
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
contain	contain 实用程序，例如 contain-size
container	container 组件
content	content 实用程序，例如 content-none
contrast	contrast 实用程序，例如 contrast-100
cursor	cursor 实用程序，例如 cursor-grab
display	display 实用程序，例如 table-column-group
divideColor	元素间边框颜色实用程序，例如 divide-slate-500
divideOpacity	divide-opacity 实用程序，例如 divide-opacity-50
divideStyle	divide-style 实用程序，例如 divide-dotted
divideWidth	元素间边框宽度实用程序，例如 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 颜色实用程序，例如 placeholder-red-600
placeholderOpacity	placeholder 颜色透明度实用程序，例如 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	文本装饰粗细实用工具，例如decoration-4
textIndent	文本缩进实用工具，例如indent-28
textOpacity	文本透明度实用工具，例如text-opacity-50
textOverflow	文本溢出实用工具，例如overflow-ellipsis
textTransform	文本转换实用工具，例如lowercase
textUnderlineOffset	文本下划线偏移实用工具，例如underline-offset-2
textWrap	文本换行实用工具，例如text-nowrap
touchAction	触摸操作实用工具，例如touch-pan-right
transform	transform实用工具（用于启用transform特性）
transformOrigin	transform-origin实用工具，例如origin-bottom-right
transitionDelay	过渡延迟实用工具，例如delay-200
transitionDuration	过渡持续时间实用工具，例如duration-200
transitionProperty	过渡属性实用工具，例如transition-colors
transitionTimingFunction	过渡时间函数实用工具，例如ease-in
translate	平移实用工具，例如translate-x-full
userSelect	用户选择实用工具，例如select-text
verticalAlign	垂直对齐实用工具，例如align-bottom
visibility	可见性实用工具，例如invisible
whitespace	空白符实用工具，例如whitespace-pre
width	宽度实用工具，例如w-2.5
willChange	will-change实用工具，例如will-change-scroll
wordBreak	断字实用工具，例如break-words
zIndex	z-index实用工具，例如z-30

设置多个配置

对于包含多个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: [],
}

打印页面