tailwindcss 官网（六）定制：配置（ `tailwind.config.js `、-p、important、核心插件、`resolveConfig`）、主题 `theme` 配置tailwindcss 官网（六）定制：配置（ tailwind.config.js、-p、important、核心插件、resolveConfig）、主题 theme 配置

tailwindcss 官网（六）定制：配置（

tailwind.config.js

、-p、important、核心插件、

resolveConfig

）、主题

theme

配置

文章目录

• tailwindcss 官网（六）定制：配置（ `tailwind.config.js `、-p、important、核心插件、`resolveConfig`）、主题 `theme` 配置
• • 1. 配置
  • • 创建 `tailwind.config.js `
    • • 使用其它文件名
      • 创建 PostCSS 配置文件 `postcss.config.js`
      • 生成全部默认配置
    • 主题 `theme`
    • 变体
    • 插件
    • 预设`presets`
    • 前缀
    • Important
    • • 选择器策略
    • 分隔符
    • 变体顺序
    • 核心插件
    • 在 JavaScript 中引用 `resolveConfig`
  • 2. 主题配置
  • • 主题结构
    • • 屏幕
      • 颜色
      • 间距
      • 核心插件
    • 定制默认主体
    • • 扩展默认主题
      • 覆盖默认主题
      • 引用其它值
      • 引用默认主题
      • 禁用全部核心插件
      • 添加自己的键
    • 配置参考

官网：安装 - Tailwind CSS 中文文档

• Tailwind 是一个构建定制用户界面的框架，所以从开始设计时便考虑了定制。
• !important
  • 这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。

1. 配置

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

因为 Tailwind 是一个构建定制用户界面的框架，所以从开始设计时便考虑了定制。

默认情况下，Tailwind 将在项目的根目录中查找一个可选的

tailwind.config.js

的文件，您可以在其中定义任何自定义选项。

// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}
           

配置文件的每个部分都是可选的，因此您只需指定要更改的内容即可。任何缺少的部分将会使用 Tailwind 的 默认配置。

创建

tailwind.config.js

使用 Tailwind CLI 功能生成 Tailwind 配置文件，Tailwind CLI 在您安装

tailwindcss

npm 软件包时已经附带安装过。

npx tailwindcss init
           

这将在项目的根目录下创建一个最小文件

tailwind.config.js

：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
           

使用其它文件名

要使用

tailwind.config.js

之外的文件名，请在命令行中将其做为参数传入：

npx tailwindcss init tailwindcss-config.js
           

如果使用自定义文件名，则在 PostCSS 配置中将 Tailwind 做为插件引入时，也需要指定它：

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

创建 PostCSS 配置文件

postcss.config.js

如果您想在生成

tailwind.config.js

文件的同时也生成一个基础的

postcss.config.js

文件，请使用

-p

标志。

npx tailwindcss init -p
           

这将在您的项目中生成一个

postcss.config.js

文件，如下所示：

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

生成全部默认配置

对于大多数用户，我们建议您尽量减少配置文件，只指定您想自定义的内容。

如果您希望构建一个完整的配置文件，其中包括 Tailwind的 所有默认配置，请使用以下

--full

选项：

npx tailwindcss init --full
           

您将得到一个与 Tailwind 内部使用的 默认配置文件 一致的文件。

主题

theme

在

theme

部分中，您可以定义调色板、字体、类型比例、边框大小、断点等任何与您网站视觉设计有关的东西。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}
           

了解更多关于默认主题及如何对其定制的信息，参考 主题配置指南 。

变体

variants

部分允许您控制为每个核心功能插件生成哪些 变体 。

// tailwind.config.js
module.exports = {
  variants: {
    fill: [],
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}
           

查看 变体配置指南 了解更多信息。

插件

plugins

部分允许您向 Tailwind 注册插件，这些插件可用于生成额外功能类、组件、基本样式或自定义变体。

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}
           

了解更多关于编写插件的信息，请查看 插件编写指南 。

预设

presets

presets

部分允许您指定自己的自定义基本配置，来替代 Tailwind 的默认基本配置。

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

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

查看 预设文档 了解更多关于预设的信息。

前缀

prefix

选项允许您为所有 Tailwind 生成的功能类添加一个自定义前缀。当 Tailwind 和一个已有的 CSS 存在命名冲突时，这个功能会非常有用。

例如，您可以通过这样设置来添加

tw-

前缀：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}
           

现在，将使用配置的前缀生成每个类。

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

请一定要理解，这个前缀是在任何变体前缀之后添加的。这意味着，带有响应式或者状态前缀（如

sm:

or

hover:

）的类仍然会最先出现，自定义前缀要写在冒号后面。

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>
           

前缀仅会被添加到 Tailwind 生成的类中；您自己的自定义类中将不会被添加前缀。

这意味着，如果您像这样添加自己的响应式功能类：

@variants hover {
  .bg-brand-gradient { /* ... */ }
}
           

… 生成的响应式类将不会带有您配置的前缀：

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

如果您也想给您自己的功能类添加前缀，只需要把前缀添加到类定义中即可：

@variants hover {
  .tw-bg-brand-gradient { /* ... */ }
}
           

Important

important

选项允许您控制是否将 Tailwind 的功能类标记为

!important

。当您将 Tailwind 与已存在的具有非常特殊的选择器的 CSS 一起使用时，这可能会非常有用。

!important

这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。

要生成

!important

的功能类，在您的配置选项中把

important

键设置为

true

：

// tailwind.config.js
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. */
           

注意：启用此选项不会将您的任何自定义功能类标记为

!important

。

如果您想把自己的功能也标记为

!important

，只需要自己在每个声明末尾添加

!important

：

@responsive {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd) !important;
  }
}
           

选择器策略

在合并第三方 JS 库且这些库会为您的元素添加内联样式的时候，设置

important

为

true

会引入一些问题。在这种情况下，Tailwind 的

!important

功能会覆盖内联样式，这会破坏您的预期设计。

为了解决这个问题，您可以为一个 ID 选择器设置

important

，比如

#app

：

// tailwind.config.js
module.exports = {
  important: '#app',
}
           

这个配置将在您所有的功能类前加上给定的选择器，有效地增加它们的特殊性，而实际上并没有使它们变得

!important

。

当您指定了

important

选择器后，您需要确保您的网站的根元素与之匹配。 使用上面的例子，我们需要将根元素的

id

属性设置为

app

，以使样式正常工作。

当您的配置都设置好，且您的根元素与 Tailwind 配置中的选择器相匹配后，Tailwind 的所有功能类将有足够高的特异性来击败您的项目中使用的其他类，但并不干扰内联样式。

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

分隔符

separator

选项可以让您自定义应该使用什么字符或字符串来分隔变体前缀（屏幕大小、

hover

、

focus

等）和类名（

text-center

、

items-end

等）。

我们默认使用冒号(

:

)，但是如果您使用的是像 Pug 这样的模板语言，不支持在类名中使用特殊字符，那么改变这个冒号就会很有用。

// tailwind.config.js
module.exports = {
  separator: '_',
}
           

变体顺序

如果您使用

extend

功能启用额外的变体，这些变体会自动排序，以遵守合理的默认变体顺序。

如果有必要，您可以在

variantOrder

键下面自定义变体顺序：

// tailwind.config.js
module.exports = {
  // ...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'disabled',
  ]
}
           

核心插件

corePlugins

部分允许您完全禁用掉那些 Tailwind 默认生成的类，如果您的项目不需要。

如果您没有提供任何

corePlugins

配置，则默认情况下将启用所有的核心插件。

// tailwind.config.js
module.exports = {
  // ...
}
           

如果您想禁用特定的核心插件，为

corePlugins

提供一个对象，将这些插件设置为

false

。

// tailwind.config.js
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}
           

如果您想安全地列出哪些核心插件应该被启用，请提供一个数组，其中包括您想使用的核心插件的列表。

// tailwind.config.js
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}
           

如果您想禁用所有 Tailwind 的核心插件，并简单地使用 Tailwind 作为处理您自己的自定义插件的工具，那么只需提供一个空数组。

// tailwind.config.js
module.exports = {
  corePlugins: []
}
           

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

Core Plugin	Description
preflight	Tailwind’s base/reset styles
container	The container component
accessibility	The sr-only and not-sr-only utilities
alignContent	The align-content utilities like content-end
alignItems	The align-items utilities like items-center
alignSelf	The align-self utilities like self-end
animation	The animation utilities like animate-none
appearance	The appearance utilities like appearance-none
backgroundAttachment	The background-attachment utilities like bg-local
backgroundClip	The background-clip utilities like bg-clip-padding
backgroundColor	The background-color utilities like bg-green-700
backgroundImage	The background-image utilities like bg-gradient-to-br
backgroundOpacity	The background-color opacity utilities like bg-opacity-25
backgroundPosition	The background-position utilities like bg-left-top
backgroundRepeat	The background-repeat utilities like bg-repeat-x
backgroundSize	The background-size utilities like bg-cover
borderCollapse	The border-collapse utilities like border-collapse
borderColor	The border-color utilities like border-green-700
borderOpacity	The border-color opacity utilities like border-opacity-25
borderRadius	The border-radius utilities like rounded-l-3xl
borderStyle	The border-style utilities like border-dotted
borderWidth	The border-width utilities like border-l-2
boxShadow	The box-shadow utilities like shadow-lg
boxSizing	The box-sizing utilities like box-border
clear	The clear utilities like clear-right
cursor	The cursor utilities like cursor-wait
display	The display utilities like table-column-group
divideColor	The between elements border-color utilities like divide-gray-500
divideOpacity	The divide-opacity utilities like divide-opacity-50
divideStyle	The divide-style utilities like divide-dotted
divideWidth	The between elements border-width utilities like divide-x-2
fill	The fill utilities like fill-current
flex	The flex utilities like flex-auto
flexDirection	The flex-direction utilities like flex-row-reverse
flexGrow	The flex-grow utilities like flex-grow-0
flexShrink	The flex-shrink utilities like flex-shrink-0
flexWrap	The flex-wrap utilities like flex-wrap-reverse
float	The float utilities like float-left
fontFamily	The font-family utilities like font-serif
fontSize	The font-size utilities like text-3xl
fontSmoothing	The font-smoothing utilities like antialiased
fontStyle	The font-style utilities like italic
fontVariantNumeric	The font-variant-numeric utilities like lining-nums
fontWeight	The font-weight utilities like font-medium
gap	The gap utilities like gap-x-28
gradientColorStops	The gradient-color-stops utilities like via-green-700
gridAutoColumns	The grid-auto-columns utilities like auto-cols-min
gridAutoFlow	The grid-auto-flow utilities like grid-flow-col
gridAutoRows	The grid-auto-rows utilities like auto-rows-min
gridColumn	The grid-column utilities like col-span-6
gridColumnEnd	The grid-column-end utilities like col-end-7
gridColumnStart	The grid-column-start utilities like col-start-7
gridRow	The grid-row utilities like row-span-3
gridRowEnd	The grid-row-end utilities like row-end-4
gridRowStart	The grid-row-start utilities like row-start-4
gridTemplateColumns	The grid-template-columns utilities like grid-cols-7
gridTemplateRows	The grid-template-rows utilities like grid-rows-4
height	The height utilities like h-64
inset	The inset utilities like bottom-10
justifyContent	The justify-content utilities like justify-center
justifyItems	The justify-items utilities like justify-items-end
justifySelf	The justify-self utilities like justify-self-end
letterSpacing	The letter-spacing utilities like tracking-normal
lineHeight	The line-height utilities like leading-9
listStylePosition	The list-style-position utilities like list-inside
listStyleType	The list-style-type utilities like list-disc
margin	The margin utilities like ml-8
maxHeight	The max-height utilities like max-h-32
maxWidth	The max-width utilities like max-w-5xl
minHeight	The min-height utilities like min-h-full
minWidth	The min-width utilities like min-w-full
objectFit	The object-fit utilities like object-fill
objectPosition	The object-position utilities like object-left-top
opacity	The opacity utilities like opacity-50
order	The order utilities like order-8
outline	The outline utilities like outline-white
overflow	The overflow utilities like overflow-y-auto
overscrollBehavior	The overscroll-behavior utilities like overscroll-y-contain
padding	The padding utilities like pr-4
placeContent	The place-content utilities like place-content-between
placeholderColor	The placeholder color utilities like placeholder-red-600
placeholderOpacity	The placeholder color opacity utilities like placeholder-opacity-25
placeItems	The place-items utilities like place-items-end
placeSelf	The place-self utilities like place-self-end
pointerEvents	The pointer-events utilities like pointer-events-none
position	The position utilities like absolute
resize	The resize utilities like resize-y
ringColor	The ring-color utilities like ring-green-700
ringOffsetColor	The ring-offset-color utilities like ring-offset-green-700
ringOffsetWidth	The ring-offset-width utilities like ring-offset-2
ringOpacity	The ring-opacity utilities like ring-opacity-50
ringWidth	The ring-width utilities like ring-2
rotate	The rotate utilities like rotate-180
scale	The scale utilities like scale-x-95
skew	The skew utilities like -skew-x-1
space	The “space-between” utilities like space-x-4
stroke	The stroke utilities like stroke-current
strokeWidth	The stroke-width utilities like stroke-1
tableLayout	The table-layout utilities like table-auto
textAlign	The text-align utilities like text-center
textColor	The text-color utilities like text-green-700
textDecoration	The text-decoration utilities like line-through
textOpacity	The text-opacity utilities like text-opacity-50
textOverflow	The text-overflow utilities like overflow-ellipsis
textTransform	The text-transform utilities like lowercase
transform	The transform utility (for enabling transform features)
transformOrigin	The transform-origin utilities like origin-bottom-right
transitionDelay	The transition-delay utilities like delay-200
transitionDuration	The transition-duration utilities like duration-200
transitionProperty	The transition-property utilities like transition-colors
transitionTimingFunction	The transition-timing-function utilities like ease-in
translate	The translate utilities like -translate-x-full
userSelect	The user-select utilities like select-text
verticalAlign	The vertical-align utilities like align-middle
visibility	The visibility utilities like visible
whitespace	The whitespace utilities like whitespace-pre
width	The width utilities like w-0.5
wordBreak	The word-break utilities like break-words
zIndex	The z-index utilities like z-30

在 JavaScript 中引用

resolveConfig

在您的客户端 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 之类的工具在构建时生成一个配置的静态版本。

2. 主题配置

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

在

tailwind.config.js

文件的

theme

部分，您可以定义您项目的调色板、类型比例、字体、断点、边框半径值等。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    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
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}
           

要了解更多信息，请参见断点自定义文档。

颜色

colors

键允许您为您的项目定制全局调色板。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}
           

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

backgroundColor

、

borderColor

、

textColor

等。

要了解更多信息，请参见 颜色自定义文档。

间距

spacing

键允许您为您的项目定制全局的间距和大小比例。

// tailwind.config.js
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

、

gap

、

inset

、

space

以及

translate

核心插件继承。

要了解更多信息，请参见 间距自定义文档。

核心插件

其余的

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

键下添加您的扩展。

例如，如果您想增加一个额外的断点，但保留现有的断点，您可以扩展

screens

属性。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px',
      }
    }
  }
}
           

覆盖默认主题

要覆盖默认主题中的一个选项，直接在您的

tailwind.config.js

文件的

theme

部分添加您的覆盖。

// tailwind.config.js
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
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()

函数，您可以使用点符号来查找您主题中的其他值。

例如，您可以通过在您的

fill

配置中引用

theme('colors')

来为您的调色板中的每一种颜色生成

fill

功能类。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // ...
    },
    fill: theme => theme('colors')
  }
}
           

theme()

函数试图从完全合并的主题对象中找到您正在寻找的值，因此它可以引用您自己的定制以及默认的主题值。它也是递归工作的，所以只要在链的最后有一个静态值，它就能解析出您要找的值。

引用默认主题

如果您出于任何原因想在默认主题中引用一个值，您可以从

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
module.exports = {
  theme: {
    opacity: {},
  }
}
           

请在您的 corePlugins 配置中禁用该插件。

// tailwind.config.js
module.exports = {
  corePlugins: {
    opacity: false,
  }
}
           

最终的结果是一样的，但既然很多核心插件没有暴露配置，只能用

corePlugins

来禁用，所以最好保持一致。

添加自己的键

在一些情况下，向

theme

对象添加自己的键是有用的。

其中一个例子是添加新的键，为多个核心插件之间的共同值创建一个单一的真实来源。例如，您可以提取一个共享的

positions

对象，它可以被

backgroundPosition

和

objectPosition

插件引用。

// tailwind.config.js
module.exports = {
  theme: {
    positions: {
      bottom: 'bottom',
      center: 'center',
      left: 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      right: 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      top: 'top',
    },
    backgroundPosition: theme => theme('positions'),
    objectPosition: theme => theme('positions'),
  }
}
           

另一个例子是在自定义插件内部添加一个新的键来引用。例如，如果您为您的项目编写了一个

filters

插件，您可以在您的

theme

对象中添加一个

filters

键，让插件引用。

// tailwind.config.js
module.exports = {
  theme: {
    filters: {
      none: 'none',
      grayscale: 'grayscale(1)',
      invert: 'invert(1)',
      sepia: 'sepia(1)',
    }
  },
  plugins: [
    require('./plugins/filters')
  ],
}
           

由于整个

theme

对象可以通过theme 函数 在您的 CSS 中使用，您也可以添加一个键来在您的 CSS 中引用它。

配置参考

除了

screens

、

colors

和

spacing

，

theme

对象中的所有的键都映射到 Tailwind 的一个 核心插件。由于许多插件负责的 CSS 属性只接受一组静态的值（例如

float

），所以请注意，不是每个插件在

theme

对象中都有一个对应的键。

所有这些键在

theme.extend

键下也是可用的，用来启用 扩展默认主题。

Key	Description
screens	Your project’s responsive breakpoints
colors	Your project’s color palette
spacing	Your project’s spacing scale
animation	Values for the animation property
backgroundColor	Values for the background-color property
backgroundImage	Values for the background-image property
backgroundOpacity	Values for the background-opacity property
backgroundPosition	Values for the background-position property
backgroundSize	Values for the background-size property
borderColor	Values for the border-color property
borderOpacity	Values for the border-opacity property
borderRadius	Values for the border-radius property
borderWidth	Values for the border-width property
boxShadow	Values for the box-shadow property
container	Configuration for the container plugin
cursor	Values for the cursor property
divideColor	Values for the divide-color property
divideOpacity	Values for the divide-opacity property
divideWidth	Values for the divide-width property
fill	Values for the fill property
flex	Values for the flex property
flexGrow	Values for the flex-grow property
flexShrink	Values for the flex-shrink property
fontFamily	Values for the font-family property
fontSize	Values for the font-size property
fontWeight	Values for the font-weight property
gap	Values for the gap property
gradientColorStops	Values for the gradient-color-stops property
gridAutoColumns	Values for the grid-auto-columns property
gridAutoRows	Values for the grid-auto-rows property
gridColumn	Values for the grid-column property
gridColumnEnd	Values for the grid-column-end property
gridColumnStart	Values for the grid-column-start property
gridRow	Values for the grid-row property
gridRowStart	Values for the grid-row-start property
gridRowEnd	Values for the grid-row-end property
transformOrigin	Values for the transform-origin property
gridTemplateColumns	Values for the grid-template-columns property
gridTemplateRows	Values for the grid-template-rows property
height	Values for the height property
inset	Values for the top , right , bottom , and left properties
keyframes	Values for the keyframes property
letterSpacing	Values for the letter-spacing property
lineHeight	Values for the line-height property
listStyleType	Values for the list-style-type property
margin	Values for the margin property
maxHeight	Values for the max-height property
maxWidth	Values for the max-width property
minHeight	Values for the min-height property
minWidth	Values for the min-width property
objectPosition	Values for the object-position property
opacity	Values for the opacity property
order	Values for the order property
outline	Values for the outline property
padding	Values for the padding property
placeholderColor	Values for the placeholderColor plugin
placeholderOpacity	Values for the placeholderOpacity plugin
ringColor	Values for the ring-color property
ringOffsetColor	Values for the ring-offset-color property
ringOffsetWidth	Values for the ring-offset-width property
ringOpacity	Values for the ring-opacity property
ringWidth	Values for the ring-width property
rotate	Values for the rotate plugin
scale	Values for the scale plugin
skew	Values for the skew plugin
space	Values for the space plugin
stroke	Values for the stroke property
strokeWidth	Values for the stroke-width property
textColor	Values for the text-color property
textOpacity	Values for the textOpacity plugin
transitionDuration	Values for the transition-duration property
transitionDelay	Values for the transition-delay property
transitionProperty	Values for the transition-property property
transitionTimingFunction	Values for the transition-timing-function property
translate	Values for the translate plugin
width	Values for the width property
zIndex	Values for the z-index property