Tailwind CSS - 主题配置

# Tailwind CSS：现代主题配置

tailwind.config.js 文件是项目设计系统的核心。此文件中的 theme 对象是定义颜色调色板、排版比例、间距单位、断点等的关键位置。掌握主题配置可让你创建完全自定义、一致且可维护的 UI。

## 核心理念：扩展而非替换

默认情况下，Tailwind 带有一个全面的默认主题。虽然你可以完全覆盖它，但推荐的最佳实践是**扩展（extend）**默认主题。这允许你在保留有用默认值的同时添加自定义值。这在 theme.extend 对象内部完成。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    // 此处的值将完全替换整个默认主题键。
    // 例如，在此处定义 `colors` 将删除 Tailwind 的所有默认颜色。
    colors: {
      'white': '#ffffff',
      'black': '#000000',
    },

    extend: {
      // 此处的值将与默认主题合并。
      // 这是添加自定义样式的首选方式。
      colors: {
        'brand': {
          'light': '#67e8f9',
          'DEFAULT': '#06b6d4',
          'dark': '#0e7490',
        }
      },
      fontFamily: {
        'sans': ['Inter', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

## 关键自定义区域

让我们探讨 theme 对象中最常自定义的部分。

### 屏幕（响应式断点）

定义项目的断点以实现响应式设计。Tailwind 遵循移动优先（mobile-first）的方法，这意味着未加前缀的工具类（p-4）适用于所有屏幕尺寸，而加前缀的工具类（md:p-8）仅适用于该断点及以上的屏幕。

module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '1024px', // 覆盖默认的 `lg` 断点
        '3xl': '1600px', // 添加一个新的断点
      },
    }
  }
}

### 颜色

使用嵌套结构定义你的颜色调色板。使用 DEFAULT 会创建一个不带后缀的工具类（例如，bg-brand）。这是一种强大的组织品牌色、状态色和中性色的方式。

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': {
          50: '#eff6ff',
          100: '#dbeafe',
          // ...
          500: '#3b82f6', // `bg-primary-500`
          // ...
          900: '#1e3a8a',
          'DEFAULT': '#3b82f6', // `bg-primary`
        },
      },
    }
  }
}

### 间距

spacing 键为 padding、margin、width、height、gap 等属性填充值。你可以使用自己的自定义值来扩展此比例尺。

module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem', // 创建诸如 `p-13`、`m-13` 等工具类。
        '128': '32rem',
        '144': '36rem',
      },
    }
  }
}

## JIT 引擎：任意值（Arbitrary Values）

Tailwind 的即时（JIT）引擎默认处于激活状态，它允许你在 HTML 中直接使用任意值。这对于不属于你的主题的一次性样式非常完美。

<div class="top-[11px] w-[345px] bg-[#bada55]">
  <!-- 此元素具有高度特定的样式 -->
</div>

何时使用任意值与主题扩展？

使用主题：适用于作为核心设计系统一部分并将被重用的值（例如，品牌色、标准间距）。
使用任意值：适用于不太可能重复的独特、一次性值（例如，背景图像的特定像素位置）。

## 高级技巧

### 引用其他值

你可以通过使用闭包（closure）来引用主题中的其他值。这对于保持配置的 DRY（Don’t Repeat Yourself，不要重复自己）原则非常有用。例如，创建一个与你的 colors 相呼应的 fill 颜色调色板。

module.exports = {
  theme: {
    colors: {
      'primary': '#3b82f6',
      'secondary': '#64748b',
    },
    fill: ({ theme }) => ({
      'primary': theme('colors.primary'),
      'secondary': theme('colors.secondary'),
    })
  }
}

### 禁用核心插件

如果你不需要某个特定的核心插件（例如 preflight），可以在 corePlugins 部分禁用它，以减小最终 CSS 文件的大小。不要将主题键设置为空对象，因为这不起作用。

// ❌ 错误的禁用方式
module.exports = {
  theme: {
    float: {} // 这不会禁用 `float` 工具类
  }
}

// ✅ 正确的禁用方式
module.exports = {
  corePlugins: {
    float: false,
  }
}

## 配置参考

theme 对象内容广泛，映射到数十个核心插件。最常自定义的键包括：

布局： screens, spacing, container
颜色： colors, backgroundColor, textColor, borderColor
排版： fontFamily, fontSize, fontWeight, lineHeight
效果： boxShadow, opacity, borderRadius
过渡： transitionProperty, transitionDuration, transitionTimingFunction

要获取所有可用主题键的完整最新列表，我们强烈建议查阅 Tailwind CSS 官方主题配置文档。这确保你始终能够访问最新的选项和功能。