淘先锋技术网

首页 1 2 3 4 5 6 7

tailwindcss 官网(六)定制:配置( tailwind.config.js、-p、important、核心插件、resolveConfig)、主题 theme 配置

官网:安装 - 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 库且这些库会为您的元素添加内联样式的时候,设置 importanttrue 会引入一些问题。在这种情况下,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 选项可以让您自定义应该使用什么字符或字符串来分隔变体前缀(屏幕大小、hoverfocus等)和类名(text-centeritems-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 PluginDescription
preflightTailwind’s base/reset styles
containerThe container component
accessibilityThe sr-only and not-sr-only utilities
alignContentThe align-content utilities like content-end
alignItemsThe align-items utilities like items-center
alignSelfThe align-self utilities like self-end
animationThe animation utilities like animate-none
appearanceThe appearance utilities like appearance-none
backgroundAttachmentThe background-attachment utilities like bg-local
backgroundClipThe background-clip utilities like bg-clip-padding
backgroundColorThe background-color utilities like bg-green-700
backgroundImageThe background-image utilities like bg-gradient-to-br
backgroundOpacityThe background-color opacity utilities like bg-opacity-25
backgroundPositionThe background-position utilities like bg-left-top
backgroundRepeatThe background-repeat utilities like bg-repeat-x
backgroundSizeThe background-size utilities like bg-cover
borderCollapseThe border-collapse utilities like border-collapse
borderColorThe border-color utilities like border-green-700
borderOpacityThe border-color opacity utilities like border-opacity-25
borderRadiusThe border-radius utilities like rounded-l-3xl
borderStyleThe border-style utilities like border-dotted
borderWidthThe border-width utilities like border-l-2
boxShadowThe box-shadow utilities like shadow-lg
boxSizingThe box-sizing utilities like box-border
clearThe clear utilities like clear-right
cursorThe cursor utilities like cursor-wait
displayThe display utilities like table-column-group
divideColorThe between elements border-color utilities like divide-gray-500
divideOpacityThe divide-opacity utilities like divide-opacity-50
divideStyleThe divide-style utilities like divide-dotted
divideWidthThe between elements border-width utilities like divide-x-2
fillThe fill utilities like fill-current
flexThe flex utilities like flex-auto
flexDirectionThe flex-direction utilities like flex-row-reverse
flexGrowThe flex-grow utilities like flex-grow-0
flexShrinkThe flex-shrink utilities like flex-shrink-0
flexWrapThe flex-wrap utilities like flex-wrap-reverse
floatThe float utilities like float-left
fontFamilyThe font-family utilities like font-serif
fontSizeThe font-size utilities like text-3xl
fontSmoothingThe font-smoothing utilities like antialiased
fontStyleThe font-style utilities like italic
fontVariantNumericThe font-variant-numeric utilities like lining-nums
fontWeightThe font-weight utilities like font-medium
gapThe gap utilities like gap-x-28
gradientColorStopsThe gradient-color-stops utilities like via-green-700
gridAutoColumnsThe grid-auto-columns utilities like auto-cols-min
gridAutoFlowThe grid-auto-flow utilities like grid-flow-col
gridAutoRowsThe grid-auto-rows utilities like auto-rows-min
gridColumnThe grid-column utilities like col-span-6
gridColumnEndThe grid-column-end utilities like col-end-7
gridColumnStartThe grid-column-start utilities like col-start-7
gridRowThe grid-row utilities like row-span-3
gridRowEndThe grid-row-end utilities like row-end-4
gridRowStartThe grid-row-start utilities like row-start-4
gridTemplateColumnsThe grid-template-columns utilities like grid-cols-7
gridTemplateRowsThe grid-template-rows utilities like grid-rows-4
heightThe height utilities like h-64
insetThe inset utilities like bottom-10
justifyContentThe justify-content utilities like justify-center
justifyItemsThe justify-items utilities like justify-items-end
justifySelfThe justify-self utilities like justify-self-end
letterSpacingThe letter-spacing utilities like tracking-normal
lineHeightThe line-height utilities like leading-9
listStylePositionThe list-style-position utilities like list-inside
listStyleTypeThe list-style-type utilities like list-disc
marginThe margin utilities like ml-8
maxHeightThe max-height utilities like max-h-32
maxWidthThe max-width utilities like max-w-5xl
minHeightThe min-height utilities like min-h-full
minWidthThe min-width utilities like min-w-full
objectFitThe object-fit utilities like object-fill
objectPositionThe object-position utilities like object-left-top
opacityThe opacity utilities like opacity-50
orderThe order utilities like order-8
outlineThe outline utilities like outline-white
overflowThe overflow utilities like overflow-y-auto
overscrollBehaviorThe overscroll-behavior utilities like overscroll-y-contain
paddingThe padding utilities like pr-4
placeContentThe place-content utilities like place-content-between
placeholderColorThe placeholder color utilities like placeholder-red-600
placeholderOpacityThe placeholder color opacity utilities like placeholder-opacity-25
placeItemsThe place-items utilities like place-items-end
placeSelfThe place-self utilities like place-self-end
pointerEventsThe pointer-events utilities like pointer-events-none
positionThe position utilities like absolute
resizeThe resize utilities like resize-y
ringColorThe ring-color utilities like ring-green-700
ringOffsetColorThe ring-offset-color utilities like ring-offset-green-700
ringOffsetWidthThe ring-offset-width utilities like ring-offset-2
ringOpacityThe ring-opacity utilities like ring-opacity-50
ringWidthThe ring-width utilities like ring-2
rotateThe rotate utilities like rotate-180
scaleThe scale utilities like scale-x-95
skewThe skew utilities like -skew-x-1
spaceThe “space-between” utilities like space-x-4
strokeThe stroke utilities like stroke-current
strokeWidthThe stroke-width utilities like stroke-1
tableLayoutThe table-layout utilities like table-auto
textAlignThe text-align utilities like text-center
textColorThe text-color utilities like text-green-700
textDecorationThe text-decoration utilities like line-through
textOpacityThe text-opacity utilities like text-opacity-50
textOverflowThe text-overflow utilities like overflow-ellipsis
textTransformThe text-transform utilities like lowercase
transformThe transform utility (for enabling transform features)
transformOriginThe transform-origin utilities like origin-bottom-right
transitionDelayThe transition-delay utilities like delay-200
transitionDurationThe transition-duration utilities like duration-200
transitionPropertyThe transition-property utilities like transition-colors
transitionTimingFunctionThe transition-timing-function utilities like ease-in
translateThe translate utilities like -translate-x-full
userSelectThe user-select utilities like select-text
verticalAlignThe vertical-align utilities like align-middle
visibilityThe visibility utilities like visible
whitespaceThe whitespace utilities like whitespace-pre
widthThe width utilities like w-0.5
wordBreakThe word-break utilities like break-words
zIndexThe 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 对象包含 screenscolorsspacing 的键,以及每一个可定制的核心插件的键。

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

屏幕

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',
      },

      // ...
    }
  }
}

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

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

间距

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',
    },
  }
}

默认情况下,这些值会被 paddingmarginwidthheightmaxHeightgapinsetspace以及 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 对象,它可以被 backgroundPositionobjectPosition 插件引用。

// 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 中引用它。

配置参考

除了 screenscolorsspacingtheme 对象中的所有的键都映射到 Tailwind 的一个 核心插件。由于许多插件负责的 CSS 属性只接受一组静态的值(例如 float),所以请注意,不是每个插件在 theme 对象中都有一个对应的键。

所有这些键在 theme.extend 键下也是可用的,用来启用 扩展默认主题

KeyDescription
screensYour project’s responsive breakpoints
colorsYour project’s color palette
spacingYour project’s spacing scale
animationValues for the animation property
backgroundColorValues for the background-color property
backgroundImageValues for the background-image property
backgroundOpacityValues for the background-opacity property
backgroundPositionValues for the background-position property
backgroundSizeValues for the background-size property
borderColorValues for the border-color property
borderOpacityValues for the border-opacity property
borderRadiusValues for the border-radius property
borderWidthValues for the border-width property
boxShadowValues for the box-shadow property
containerConfiguration for the container plugin
cursorValues for the cursor property
divideColorValues for the divide-color property
divideOpacityValues for the divide-opacity property
divideWidthValues for the divide-width property
fillValues for the fill property
flexValues for the flex property
flexGrowValues for the flex-grow property
flexShrinkValues for the flex-shrink property
fontFamilyValues for the font-family property
fontSizeValues for the font-size property
fontWeightValues for the font-weight property
gapValues for the gap property
gradientColorStopsValues for the gradient-color-stops property
gridAutoColumnsValues for the grid-auto-columns property
gridAutoRowsValues for the grid-auto-rows property
gridColumnValues for the grid-column property
gridColumnEndValues for the grid-column-end property
gridColumnStartValues for the grid-column-start property
gridRowValues for the grid-row property
gridRowStartValues for the grid-row-start property
gridRowEndValues for the grid-row-end property
transformOriginValues for the transform-origin property
gridTemplateColumnsValues for the grid-template-columns property
gridTemplateRowsValues for the grid-template-rows property
heightValues for the height property
insetValues for the top, right, bottom, and left properties
keyframesValues for the keyframes property
letterSpacingValues for the letter-spacing property
lineHeightValues for the line-height property
listStyleTypeValues for the list-style-type property
marginValues for the margin property
maxHeightValues for the max-height property
maxWidthValues for the max-width property
minHeightValues for the min-height property
minWidthValues for the min-width property
objectPositionValues for the object-position property
opacityValues for the opacity property
orderValues for the order property
outlineValues for the outline property
paddingValues for the padding property
placeholderColorValues for the placeholderColor plugin
placeholderOpacityValues for the placeholderOpacity plugin
ringColorValues for the ring-color property
ringOffsetColorValues for the ring-offset-color property
ringOffsetWidthValues for the ring-offset-width property
ringOpacityValues for the ring-opacity property
ringWidthValues for the ring-width property
rotateValues for the rotate plugin
scaleValues for the scale plugin
skewValues for the skew plugin
spaceValues for the space plugin
strokeValues for the stroke property
strokeWidthValues for the stroke-width property
textColorValues for the text-color property
textOpacityValues for the textOpacity plugin
transitionDurationValues for the transition-duration property
transitionDelayValues for the transition-delay property
transitionPropertyValues for the transition-property property
transitionTimingFunctionValues for the transition-timing-function property
translateValues for the translate plugin
widthValues for the width property
zIndexValues for the z-index property