Tailwind CSS 主题

2022-07-28 09:55 更新

主题配置

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

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

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

您不能将函数用于单个值

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

使用顶级主题键的功能

// tailwind.config.js
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
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
`backdropBlur`	Values for the `backdrop-blur` property
`backdropBrightness`	Values for the `backdrop-brightness` property
`backdropContrast`	Values for the `backdrop-contrast` property
`backdropGrayscale`	Values for the `backdrop-grayscale` property
`backdropHueRotate`	Values for the `backdrop-hue-rotate` property
`backdropInvert`	Values for the `backdrop-invert` property
`backdropOpacity`	Values for the `backdrop-opacity` property
`backdropSaturate`	Values for the `backdrop-saturate` property
`backdropSepia`	Values for the `backdrop-sepia` 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
`blur`	Values for the `blur` property
`brightness`	Values for the `brightness` 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
`caretColor`	Values for the `caret-color` property
`contrast`	Values for the `contrast` property
`container`	Configuration for the `container` plugin
`content`	Values for the `content` property
`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
`dropShadow`	Values for the `drop-shadow` property
`fill`	Values for the `fill` property
`grayscale`	Values for the `grayscale` property
`hueRotate`	Values for the `hue-rotate` property
`invert`	Values for the `invert` 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
`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
`saturate`	Values for the `saturate` property
`scale`	Values for the `scale` plugin
`sepia`	Values for the `sepia` property
`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
`transformOrigin`	Values for the `transform-origin` property
`transitionDelay`	Values for the `transition-delay` property
`transitionDuration`	Values for the `transition-duration` 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

以上内容是否对您有帮助：

← Tailwind CSS Just-in-Time Mode

Tailwind CSS 断点 →

写笔记

我要补充