Tailwind: 配置和插件

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

项目配置文件和默认配置文件

当我们安装好 tailwind 时，项目中会有一个 tailwind.config.js（通过 npx tailwindcss init -p命令生成），它就是项目配置文件，通过它可以对 tailwind 进行配置。一个在 nextjs 项目中的典型的的 tailwind.config.js 长成这样：

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

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

配置：覆盖还是扩展

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

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

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

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

export default function Home() {
  return (
    <div>
      <div className="text-axum-rs">你好，Axum.rs</div>
      <div className="bg-axum-rs text-gray-50">你好，Axum.rs</div>
      <div className="border-4 border-axum-rs my-3 p-3">你好，Axum.rs</div>
    </div>
  );
}

官方插件