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 CSS config.js

自定义配置

'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’ 文件的插件部分允许您添加额外的实用程序、组件、基础样式、自定义变体等等，如下所示。
  • 插件： '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 部分关闭任何不需要的默认 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: [],
}
打印页面
上一页
下一页
广告