自定义 Tailwind 的原因

Tailwind 是一个生成大量 CSS 类的引擎，而这个引擎提供了许多钩子，允许我们更改可供使用的实用工具集。

我们可能出于以下几个原因需要自定义 Tailwind：

• 更改默认值：Tailwind 为大多数实用工具提供了默认的步进值——例如，边距、内边距和其他间距项的常见步进值。它还提供了默认的屏幕尺寸以用于响应式断点。Tailwind 也提供了一组默认颜色，但我们可能希望添加自己的颜色。在配置文件中，我们可以更改这些设置。

• 更改类名集合：Tailwind 会生成大量的 CSS 类。出于文件大小的考虑，我们可能希望减少这个列表——例如，如果我们知道不会使用 flexbox，就可以告诉 Tailwind 不生成任何与 flexbox 相关的实用工具。相反，Tailwind 提供了大约十几个前缀修饰符，可实现强大的行为，但默认情况下不会生成。

• 添加新行为：虽然我们可以在常规 CSS 中编写自己的扩展，但也可以作为插件添加新项目，这些插件是 Tailwind 配置的一部分。这使得它们更容易与其他 Tailwind 行为共享和集成。

• 与遗留 CSS 集成：我们可能希望在一个已经拥有大量 CSS 的网站上开始使用 Tailwind。Tailwind 提供了配置选项，使我们能够确保 Tailwind 实用工具不会与现有 CSS 冲突，或与我们的 HTML 模板工具的限制冲突。

让我们来看看如何根据自己的喜好来定制 Tailwind，从配置文件开始。

配置文件基础

配置文件是可选地作为 Tailwind 安装的一部分生成的。我们也可以在安装 Tailwind npm 包后，通过命令 npx tailwindcss init 在任何时候创建它。以下是最小配置文件的样子：

1module.exports = {
2  future: {},
3  purge: [],
4  theme: {
5    extend: {},
6  },
7  variants: {},
8  plugins: [],
9}

如果我们想要一个包含完整默认配置明确列出的配置文件，可以使用 npx tailwindcss init --full 获取。我们大部分将要查看的内容都会放在 theme 和 variants 部分。

Tailwind 将每组实用工具视为一个核心插件；我们可以在 Tailwind 文档中看到完整的列表。theme 对象引用这些核心插件名称以自定义核心插件。大多数核心插件都有自定义选项。

更改默认值

在配置文件中，theme 对象的键是每个核心插件的名称，值是该插件的配置选项。三个特殊的配置选项——screen、color 和 spacing——本身并不是核心插件，而是许多其他核心插件配置的基础。

这里值得一提的是，Tailwind 使用“theme”这个词的方式与其他地方不同，在其他地方“theme”通常指一组颜色，如深色主题与浅色主题。对于 Tailwind 来说，“theme”是整个默认设置集，且只有一个。如果我们想更改配色方案，需要使用 CSS 变量或 dark: 前缀来指定暗模式下的行为。

注意：我们可以在 GitHub 上查看完整的默认主题。这是 Tailwind 主分支中的主题，因此可能略高于已发布的版本。

我们可以通过两种方式自定义主题：

1. 覆盖整个选项
2. 扩展选项

覆盖整个选项

要覆盖，我们为整个对象（无论是核心插件还是 theme 对象中的特殊值）提供一组新的值。此示例更改了全部屏幕断点集。以这种方式覆盖 theme 对象会完全替换默认值：

1theme: {
2    screens: {
3      'phone': '640px',
4      'landscape': '768px',
5      'tablet': '1024px',
6      'laptop': '1280px',
7    } 
8}

扩展选项

如果我们希望保留现有的默认值，但在其基础上添加新的值，可以使用 theme#extend。此配置添加了一个额外的超宽屏幕断点：

1theme: {
2  extend: {
3    screens: {
4      3xl: '2440px',
5    } 
6  }
7}