1. 使用 @apply 语法#

在自定义的 CSS 文件中，使用 Tailwind 的 @apply 语法将常用的样式组合成一个自定义的类。例如：

1
.btn-primary {
2
  @apply bg-blue-500 text-white py-2 px-4 rounded;
3
}

然后在组件中使用：

1
<button className="btn-primary">Click me</button>

这样可以减少 JSX 文件中的 className 冗余。

2. 封装组件#

将常用的样式封装成可复用的组件。例如，将按钮样式封装为一个 Button 组件：

1
const Button = ({ children, className, ...props }) => (
2
  <button
3
    className={`bg-blue-500 text-white py-2 px-4 rounded ${className}`}
4
    {...props}
5
  >
6
    {children}
7
  </button>
8
);
9

10
// 使用
11
<Button className="my-2">Click me</Button>;

通过这种方式，可以保持代码的简洁并提高复用性。

3. 使用 clsx 或 classnames 库#

这些库可以帮助你有条件地组合多个 className，减少重复性。例如：

1
import clsx from "clsx";
2

3
const isActive = true;
4
const buttonClass = clsx("bg-blue-500 text-white py-2 px-4 rounded", {
5
  "opacity-50": !isActive,
6
});
7

8
<button className={buttonClass}>Click me</button>;

clsx 或 classnames 可以根据条件动态添加类名，避免硬编码所有的 className。

4. 使用 Tailwind 的 theme 配置#

通过修改 Tailwind 配置文件（tailwind.config.js）来扩展主题或者自定义一些快捷类。例如，可以为常用的颜色或者尺寸创建更易读的别名：

1
module.exports = {
2
  theme: {
3
    extend: {
4
      colors: {
5
        primary: "#3490dc",
6
      },
7
    },
8
  },
9
};

然后在项目中直接使用自定义颜色：

1
<div className="bg-primary text-white">Hello, Tailwind!</div>

5. 结合 Tailwind 和 CSS-in-JS 库#

可以搭配一些 CSS-in-JS 库（例如 styled-components 或 Emotion），结合使用 Tailwind 和自定义样式。这样可以在样式复用性和代码简洁性之间取得平衡。

通过这些方法，可以有效减少重复的 className，提高代码的可维护性和可读性。