Tailwind: 配置和插件

本章将讨论如何配置 tailwind，以及几个 tailwind 官方插件。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

• content：配置 tailwind 要处理的文件。只有在这里配置的文件，才能使用 tailwind 的样式，进而由 PostCSS 打包进实际项目中

• theme：主题

  • extend：扩展

• plugins：插件

为了避免出错，对照默认配置文件进行操作未免不是一个好办法。当然，由于我们的配置文件中有 /** @type {import('tailwindcss').Config} */，像VSCODE这种编辑器，会有配置项的自动提示。

配置：覆盖还是扩展

• 如果你把配置项直接写在 theme里，那就是覆盖了默认配置，默认配置里的同一类型的预定义值可能都会失效，而改用你的配置
• 如果你把配置项写在 theme.extend里，那就是扩展，可以同时使用默认配置和你扩展的配置。

下面我们通过扩展一个名为 axum-rs，值为#7b1f00的颜色进行讲解。

在 tailwind.config.js 中，加入以下配置

此时，无论是文本、背景、边框等等，都可以使用 axum-rs 这个颜色了：

由于我们使用的是扩展，而不是覆盖，所以不但能使用我们自己加的颜色，也能继续使用 tailwind 预置的颜色，比如上例的 text-gray-50。

官方插件

• @tailwindcss/typography：预置了一些排版样式
• @tailwindcss/forms：预置了一些表单样式