Tailwind CSS - 预设

Tailwind 预设（Presets）是一项强大功能，用于创建可共享、可重用的配置。你可以将其视为构建自己风格的 Tailwind 的一种方式——非常适合在多个项目之间维护一致的设计系统，或与团队共享一个入门套件。

tailwind.config.js 中的 presets 选项允许你指定一个基础配置，该配置随后会与你项目特定的自定义设置智能合并。

创建预设

预设本质上就是一个标准的 Tailwind 配置对象，从 JavaScript 文件中导出。它可以像常规的 tailwind.config.js 一样定义主题、添加插件以及自定义核心插件。

示例：企业品牌预设

让我们为一家虚构的公司“Acmecorp”创建一个预设。我们将定义他们的品牌颜色、字体，并包含一个常用插件。

module.exports = {
  theme: {
    colors: {
      // 基础颜色
      'transparent': 'transparent',
      'white': '#ffffff',
      'black': '#000000',
      // 品牌颜色
      'brand': {
        'light': '#67e8f9',
        'DEFAULT': '#06b6d4', // 用于 'bg-brand', 'text-brand' 等
        'dark': '#0e7490',
      },
      // 中性色板
      'gray': {
        '100': '#f7fafc',
        '500': '#a0aec0',
        '900': '#1a202c',
      }
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
    extend: {
      // 在此处添加扩展主题值
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

使用预设

要在项目中启用此预设，请在 tailwind.config.js 的 presets 数组中引用它。你的本地自定义设置将会在预设的基础上进行合并。

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./presets/acmecorp-preset.js')
  ],
  // 项目特定的自定义设置在此处
  theme: {
    extend: {
      spacing: {
        '128': '32rem', // 仅为本项目添加一个新的间距值
      }
    }
  },
};

理解合并逻辑

你的配置如何与预设合并是关键：

替换： 你项目配置中的顶层选项，如 content、darkMode、prefix 和 separator，将完全替换预设中的对应选项。
theme： 在你的项目中定义一个主题键（例如 theme.colors）将替换预设中的同名键。要为预设的主题添加内容，请使用 theme.extend。
theme.extend： 这个对象会进行深度合并。你项目和预设的 extend 值都将被组合。
plugins： plugins 数组会被连接起来。你将获得预设中的所有插件以及你在项目中添加的任何插件。你无法从你的配置中禁用预设的插件。
presets 数组： 如果你列出多个预设，它们会按顺序应用。数组中最后一个预设具有最高的优先级。

禁用默认的 Tailwind 配置

如果你想完全从零开始构建一个设计系统，不使用 Tailwind 的任何默认主题值，你可以提供一个空的 presets 数组。这会有效地移除 Tailwind 的基础配置。

// 警告：这将移除所有默认颜色、间距、字体等。
// 你必须从头开始定义所有你需要的主题。

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [],
  theme: {
    colors: {
      'primary': '#ff0000',
    },
    // ... 你必须定义所有你需要的内容
  },
};

一种常见的模式是创建一个全面的基础预设，该预设本身就禁用了默认配置，然后将该预设应用于你所有的项目，以确保它们仅使用你设计系统的令牌构建。