主题配置 - Tailwind CSS 中文

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

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

颜色

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

通过此添加，一个新的 3xl 屏幕大小与现有的响应式变体（如 sm、md、lg 等）一起提供。您可以通过将其放在实用程序类之前来使用此新变体

<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 键下可用，以启用扩展默认主题。

键	描述
`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` 属性的值
`笔触宽度`	`stroke-width` 属性的值
`支持`	`supports` 属性的值
`数据`	`data` 属性的值
`文本颜色`	`text-color` 属性的值
`文本修饰颜色`	`text-decoration-color` 属性的值
`文本修饰粗细`	`text-decoration-thickness` 属性的值
`文本缩进`	`text-indent` 属性的值
`文本不透明度`	`textOpacity` 插件的值
`文本下划线偏移`	`text-underline-offset` 属性的值
`变换原点`	`transform-origin` 属性的值
`过渡延迟`	`transition-delay` 属性的值
`过渡持续时间`	`transition-duration` 属性的值
`过渡属性`	`transition-property` 属性的值
`过渡时序函数`	`transition-timing-function` 属性的值
`平移`	`translate` 插件的值
`尺寸`	`size` 属性的值
`宽度`	`width` 属性的值
`将更改`	`will-change` 属性的值
`层级`	`z-index` 属性的值

在此页面上