如何在Tailwind CSS中定义包含多个类名的自定义类？

当然可以把重复的Tailwind类名封装成自定义类，除了你提到的React组件方案，还有以下几种实用方法：

1. Tailwind官方推荐：@apply指令 #

这是最贴合Tailwind工作流的方案，你可以在自定义CSS文件中用@apply把多个Tailwind类合并成一个自定义类：

/* 在你的自定义CSS文件中（比如custom.css） */
.myComponentName {
  @apply text-xs text-slate-600 uppercase font-bold tracking-wider;
}

使用时直接引用这个自定义类即可：

<div class="myComponentName">Text</div>

注意：要确保这个自定义CSS文件被Tailwind的配置识别——要么在tailwind.config.js的content数组中包含该文件路径，要么将其导入到已经引入Tailwind基础样式的主CSS文件中（比如在index.css里添加@import './custom.css';，且主文件已经有@tailwind base; @tailwind components; @tailwind utilities;）。

2. JS类名字段（适用于JS/TS项目） #

如果不想额外写CSS，可以在JS中定义一个存储类名字符串的变量，重复使用：

// 定义在全局或组件文件中
const myComponentClasses = 'text-xs text-slate-600 uppercase font-bold tracking-wider';

使用时直接传入class属性：

<!-- 原生JS -->
<div class="${myComponentClasses}">Text</div>

<!-- React/Vue等框架 -->
<div className={myComponentClasses}>Text</div>

3. Tailwind自定义组件（进阶） #

如果你需要更复杂的复用，还可以在Tailwind的components层直接定义组件样式，和@apply原理类似，但更贴合Tailwind的分层架构：

/* 在主CSS文件的@tailwind components;之后 */
@layer components {
  .myComponentName {
    @apply text-xs text-slate-600 uppercase font-bold tracking-wider;
  }
}

这种方式会让自定义类被Tailwind的构建工具处理，支持Tree Shaking，不会产生冗余CSS。

内容的提问来源于stack exchange，提问作者Paul