Tailwind CSS 自定义样式

虽然 Tailwind CSS 提供了非常全面的默认设计系统，但几乎每个项目都有其独特的品牌和风格需求。Tailwind 的强大之处在于其极高的可定制性。本章将探讨自定义样式的两种主要方法：修改主题配置和使用任意值。

1. 通过 tailwind.config.js 定制主题

这是最结构化、最推荐的自定义方式，适用于你希望在整个项目中重复使用的值（如品牌颜色、特定的间距单位等）。

所有主题相关的自定义都在 tailwind.config.js 文件的 theme 或 theme.extend 对象中完成。

最佳实践： 始终将你的自定义项放在 theme.extend 中，这样可以保留 Tailwind 的默认值，只添加或覆盖你指定的部分。

示例：自定义颜色

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#1DA1F2',
        'secondary': '#14171A',
        'accent': {
          'light': '#AAB8C2',
          'dark': '#657786',
        },
      },
    },
  },
}

现在，你可以在项目中使用这些新的颜色工具类了：

<button class="bg-primary text-white">Follow</button>
<p class="text-accent-dark">A subtle message</p>

示例：自定义间距和字体

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
        'serif': ['Merriweather', 'ui-serif'],
      },
    },
  },
}

2. 使用任意值 (Arbitrary Values)

从 Tailwind CSS v3 开始，JIT 引擎允许你使用方括号 [] 语法来创建临时的、一次性的工具类。这在你只需要应用一个非常特定的、不太可能复用的值时非常有用。

语法： property-[value]

示例：

<!-- 一个非常特定的上边距 -->
<div class="top-[117px]">...</div>

<!-- 一个基于计算的宽度 -->
<div class="w-[calc(100%-2rem)]">...</div>

<!-- 一个任意的颜色值 -->
<div class="bg-[#bada55]">...</div>

优点：

• 快速便捷：无需修改配置文件，可以直接在 HTML 中实现精确的样式。
• 避免配置膨胀：对于那些只用一次的“魔法数字”，可以避免让你的 tailwind.config.js 变得混乱。

何时使用哪种方法？

• 使用主题定制：当你需要定义一个将在项目中多次复用的值时。例如，你的品牌主色、标准的组件间距、网站的字体等。这有助于保持设计的一致性。

• 使用任意值：当你需要一个一次性的、不太可能在别处重复的特定值时。例如，为了像素级对齐某个背景图片而进行的微调。

通过结合这两种方法，你既可以维护一个一致、可控的设计系统，又能在需要时拥有足够的灵活性来处理特殊情况。