主题

为你的项目定制默认主题。

您的 tailwind.config.js 文件的 theme 部分是您定义项目的颜色调色板、类型比例、字体、断点、边框半径值等的地方。

tailwind.config.js

/** @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',
      }
    }
  }
}

我们提供了一个合理的默认主题，具有非常丰富的值集，让您可以开始使用，但不要害怕更改它或扩展它；鼓励您根据设计目标自定义它。

主题结构

theme 对象包含 screens 、 colors 和 spacing 的键，以及每个可定制核心插件的键。

请参阅主题配置参考或默认主题，获取主题选项的完整列表。

屏幕

" screens "键允许您自定义项目中的响应断点。

tailwind.config.js

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

To learn more, see the breakpoint customization documentation. 要了解更多信息，请参阅断点自定义文档。

颜色

colors 键允许您自定义项目的全局颜色调色板。

tailwind.config.js

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

      // ...
    }
  }
}

默认情况下，这些颜色会被所有与颜色相关的核心插件继承，比如 backgroundColor ， borderColor ， textColor 等等。

了解更多，请参阅颜色自定义文档。

间距

spacing 键允许您自定义项目的全局间距和尺寸比例。

tailwind.config.js

/** @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',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    },
  }
}

默认情况下，这些值会被 padding , margin , width , height , maxHeight , flex-basis , gap , inset , space , translate , scrollMargin , scrollPadding , 和 textIndent 核心插件继承。

了解更多，请参阅间距自定义文档。

核心插件

其余的 theme 部分用于配置每个单独的核心插件可用的值。

例如， borderRadius 键允许您自定义将生成哪些边框半径实用程序：

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

键确定生成类的后缀，值确定实际 CSS 声明的值。

上面的示例 borderRadius 配置将生成以下 CSS 类：

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

您会注意到在主题配置中使用 DEFAULT 键创建了没有后缀的类 rounded 。这是 Tailwind 中的常见约定，并受所有核心插件支持。

了解有关自定义特定核心插件的更多信息，请访问该插件的文档。

要获取可用主题属性及其默认值的完整参考，请参阅默认主题配置。

自定义默认主题

在开箱即用的情况下，您的项目将自动继承默认主题配置的值。如果您想自定义默认主题，根据您的目标，您有几种不同的选择。

扩展默认主题

如果您想保留主题选项的默认值，同时还要添加新值，请在配置文件中的 theme.extend 键下添加您的扩展。该键下的值将与现有的 theme 值合并，并自动作为新类可用，您可以使用。

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // Adds a new `font-display` class
      }
    }
  }
}

将此添加到您的主题后，您可以像使用任何其他 font-{family} 实用程序一样使用它：

<h1 class="font-display">
  This uses the Oswald font
</h1>

在某些情况下，属性映射到可以放置在实用程序前面以有条件地应用其样式的变体。例如，要添加一个与现有响应式屏幕完全相同的 3xl 屏幕大小，请在 screens 键下添加一个属性：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px', // Adds a new `3xl:` screen variant
      }
    }
  }
}

通过这个新增功能，除了现有的响应式变体如 sm 、 md 、 lg 等，还提供了一个新的 3xl 屏幕尺寸。您可以通过在实用类之前放置它来使用这个新变体。

<blockquote class="text-base md:text-md 3xl:text-lg">
  Oh I gotta get on that internet, I'm late on everything!
</blockquote>

覆盖默认主题

要覆盖默认主题中的选项，请直接在 tailwind.config.js 的 theme 部分下添加您的覆盖。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

这将完全替换 Tailwind 对该键的默认配置，因此在上面的示例中，不会生成任何默认的不透明度实用程序。

任何您未提供的键将从默认主题继承，因此在上面的示例中，诸如颜色、间距、边框半径、背景位置等默认主题配置将被保留。

当然，您可以在同一配置中既覆盖默认主题的某些部分，又扩展默认主题的其他部分。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    },
    extend: {
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

参考其他数值

如果您需要在主题中引用另一个值，可以通过提供闭包而不是静态值来实现。 闭包将接收一个包含 theme() 函数的对象，您可以使用该函数使用点符号查找主题中的其他值。

例如，您可以通过在 backgroundSize 配置中引用 theme('spacing') 来为您的间距比例尺中的每个值生成 background-size 实用程序：

tailwind.config.js

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

theme() 函数尝试从完全合并的主题对象中找到您要查找的值，因此它可以引用您自己的定制以及默认主题值。它还可以递归工作，只要在链的末尾有一个静态值，它就能解析您要查找的值。

请注意，您只能将这种类型的关闭与顶级主题键一起使用，而不能将其用于每个部分内部的键。

✘ 你不能使用函数来处理单个数值

tailwind.config.js

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

✓ 使用函数来设置顶层主题键

tailwind.config.js

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

引用默认主题

如果您想出于任何原因引用默认主题中的值，可以从 tailwindcss/defaultTheme 中导入它。

这是有用的一个例子，如果你想要将字体系列添加到Tailwind默认的字体堆栈之一：

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

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

禁用整个核心插件

如果您不想为某个核心插件生成任何类，最好在您的 corePlugins 配置中将该插件设置为 false，而不是在您的 theme 配置中为该键提供一个空对象。

✘ 不要在您的主题配置中分配空对象

tailwind.config.js

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

✓ 在您的 corePlugins 配置中禁用插件

tailwind.config.js

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

最终结果是相同的，但由于许多核心插件不公开配置，它们只能使用 corePlugins 禁用，因此保持一致性更好。

配置参考

除了 screens 、 colors 和 spacing 之外， theme 对象中的所有键都映射到 Tailwind 的核心插件之一。由于许多插件负责只接受静态值集的 CSS 属性（例如 float ），请注意并非每个插件在 theme 对象中都有对应的键。

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

Key	Description
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	text-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-属性的值 属性的值
transitionTimingFunction	transition-timing-function 属性的值
translate	translate 插件的值
size	size 属性的值
width	width 属性的值
willChange	will-change 属性的值
zIndex	z-index 属性的值