Tailwind CSS - 主题配置

Tailwind CSS 主题配置用于指定项目的主题。在 'tailwind.config.js' 文件中，'theme' 部分允许你定义项目的调色板、字体比例、字体、断点、边框半径值等。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    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: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

主题结构

'tailwind.config.js' 文件中的 'theme' 部分包含一系列用于自定义的键，如 'screens'、'colors'、'spacing' 和 'core plugin' 等。

断点 (Screens)

'screens' 键允许你在项目中设置响应式断点。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

颜色 (Colors)

'colors' 键允许你为项目设置全局调色板。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },
      // ...
    }
  }
}

间距 (Spacing)

'spacing' 键允许你为项目设置全局间距和尺寸比例。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
    },
  }
}

核心插件 (Core Plugins)

主题设置允许你为每个插件选择选项。例如，borderRadius 设置圆角样式。

module.exports = {
    theme: {
        borderRadius: {
        'none': '0',
        'sm': '.125rem',
        DEFAULT: '.25rem',
        'lg': '.5rem',
        'full': '9999px',
        },
    }
    }

名称成为类名，值设置样式。这会创建类似 rounded 的类。这就是 Tailwind 所有插件的工作方式。

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

自定义默认主题

你的项目会自动使用默认主题设置。如果你想更改它们，你有多种选项来自定义主题以满足你的需求。

扩展默认主题

'theme.extend' 选项允许你在保持默认值的同时向主题添加新值。这会合并新旧值，为你创建新的类。

例如，这里我们扩展 fontFamily 属性以添加 font-display 类，它可以更改元素上使用的字体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // 添加新的 `font-display` 类
      }
    }
  }
}

将此添加到你的主题后，你可以像使用任何其他字体工具一样使用它：

<h1 class="font-display">
  这使用 Oswald 字体
</h1>

覆盖默认主题

你可以通过直接在 'tailwind.config.js' 的 theme 部分添加覆盖来更改默认主题选项。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // 替换所有默认的 `opacity` 值
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

引用其他值

使用闭包来引用其他主题值。它为你提供了一个 theme() 函数，可以使用点表示法访问其他值。

例如，你可以通过在 backgroundSize 配置中引用 theme('spacing')，为间距比例中的每个值生成背景尺寸工具类。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    spacing: {
        // ...
    },
    backgroundSize: ({ theme }) => ({
        auto: 'auto',
        cover: 'cover',
        contain: 'contain',
        ...theme('spacing')
    })
    }
}

注意：对顶级主题键使用函数。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    fill: ({ theme }) => ({
        gray: theme('colors.gray')
    })
    }
}

引用默认主题

要使用默认主题中的值，请从 tailwindcss/defaultTheme 导入它。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

禁用整个核心插件

要禁用核心插件，请在 corePlugins 中将其设置为 'false'，而不是在主题配置中使用空对象。

/** 不要这样做 */
  
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

/** 总是这样做 */
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
  opacity: false,
}
}

配置参考

大多数主题对象键与 Tailwind 的核心插件相匹配，除了 screens、colors 和 spacing。一些插件没有主题键，因为它们只接受固定值。你也可以使用 theme.extend 键扩展默认主题。

所有这些键也可在 theme.extend 键下使用，以启用扩展默认主题。

类	CSS 属性
accentColor	accent-color 属性的值
animation	animation 属性的值
aria	aria 属性的值
aspectRatio	aspect-ratio 属性的值
backdropBlur	backdropBlur 插件的值
backdropBrightness	backdropBrightness 插件的值
backdropContrast	backdropContrast 插件的值
backdropGrayscale	backdropGrayscale 插件的值
backdropHueRotate	backdropHueRotate 插件的值
backdropInvert	backdropInvert 插件的值
backdropOpacity	backdropOpacity 插件的值
backdropSaturate	backdropSaturate 插件的值
backdropSepia	backdropSepia 插件的值
backgroundColor	background-color 属性的值
backgroundImage	background-image 属性的值
backgroundOpacity	background-opacity 属性的值
backgroundPosition	background-position 属性的值
backgroundSize	background-size 属性的值
blur	blur 插件的值
borderColor	border-color 属性的值
borderOpacity	borderOpacity 插件的值
borderRadius	border-radius 属性的值
borderSpacing	border-spacing 属性的值
borderWidth	borderWidth 插件的值
boxShadow	box-shadow 属性的值
boxShadowColor	boxShadowColor 插件的值
brightness	brightness 插件的值
caretColor	caret-color 属性的值
colors	项目的调色板
columns	columns 属性的值
container	container 插件的配置
content	content 属性的值
contrast	contrast 插件的值
cursor	cursor 属性的值
divideColor	divideColor 插件的值
divideOpacity	divideOpacity 插件的值
divideWidth	divideWidth 插件的值
dropShadow	dropShadow 插件的值
fill	fill 插件的值
flex	flex 属性的值
flexBasis	flex-basis 属性的值
flexGrow	flex-grow 属性的值
flexShrink	flex-shrink 属性的值
fontFamily	font-family 属性的值
fontSize	font-size 属性的值
fontWeight	font-weight 属性的值
gap	gap 属性的值
gradientColorStops	gradientColorStops 插件的值
gradientColorStopPositions	gradient-color-stop-positions 属性的值
grayscale	grayscale 插件的值
gridAutoColumns	grid-auto-columns 属性的值
gridAutoRows	grid-auto-rows 属性的值
gridColumn	grid-column 属性的值
gridColumnEnd	grid-column-end 属性的值
gridColumnStart	grid-column-start 属性的值
gridRow	grid-row 属性的值
gridRowEnd	grid-row-end 属性的值
gridRowStart	grid-row-start 属性的值
gridTemplateColumns	grid-template-columns 属性的值
gridTemplateRows	grid-template-rows 属性的值
height	height 属性的值
hueRotate	hueRotate 插件的值
inset	top、right、bottom 和 left 属性的值
invert	invert 插件的值
keyframes	animation 插件中使用的关键帧值
letterSpacing	letter-spacing 属性的值
lineHeight	line-height 属性的值
listStyleType	list-style-type 属性的值
listStyleImage	list-style-image 属性的值
margin	margin 属性的值
lineClamp	line-clamp 属性的值
maxHeight	max-height 属性的值
maxWidth	max-width 属性的值
minHeight	min-height 属性的值
minWidth	min-width 属性的值
objectPosition	object-position 属性的值
opacity	opacity 属性的值
order	order 属性的值
outlineColor	outline-color 属性的值
outlineOffset	outline-offset 属性的值
outlineWidth	outline-width 属性的值
padding	padding 属性的值
placeholderColor	placeholderColor 插件的值
placeholderOpacity	placeholderOpacity 插件的值
ringColor	ringColor 插件的值
ringOffsetColor	ringOffsetColor 插件的值
ringOffsetWidth	ringOffsetWidth 插件的值
ringOpacity	ringOpacity 插件的值
ringWidth	ringWidth 插件的值
rotate	rotate 插件的值
saturate	saturate 插件的值
scale	scale 插件的值
screens	项目的响应式断点
scrollMargin	scroll-margin 属性的值
scrollPadding	scroll-padding 属性的值
sepia	sepia 插件的值
skew	skew 插件的值
space	space 插件的值
spacing	项目的间距比例
stroke	stroke 属性的值
strokeWidth	stroke-width 属性的值
supports	supports 属性的值
data	data 属性的值
textColor	color 属性的值
textDecorationColor	text-decoration-color 属性的值
textDecorationThickness	text-decoration-thickness 属性的值
textIndent	text-indent 属性的值
textOpacity	textOpacity 插件的值
textUnderlineOffset	text-underline-offset 属性的值
transformOrigin	transform-origin 属性的值
transitionDelay	transition-delay 属性的值
transitionDuration	transition-duration 属性的值
transitionProperty	transition-property 属性的值
transitionTimingFunction	transition-timing-function 属性的值
translate	translate 插件的值
size	size 属性的值
width	width 属性的值
willChange	will-change 属性的值
zIndex	z-index 属性的值