如何在React/Next.js组件中精简Tailwind CSS样式？

针对你遇到的重复编写类名、难以统一更新样式的问题，以下是几种实用的最佳实践，既能保留 Tailwind 快速开发的优势，又能实现样式的单一数据源管理：

1. 封装复用组件 #

将带有重复样式的元素封装成独立 React 组件，后续只需修改组件内部的样式，所有引用处都会同步更新，这也是 React 组件化思想的核心应用。

示例：

// components/ErrorText.jsx
export default function ErrorText({ children, className = "" }) {
  // 支持传入额外类名扩展样式
  return <p className={`text-[16px] text-red-700 ${className}`}>{children}</p>;
}

// 业务代码中使用
<div>
  <ErrorText>one</ErrorText>
  <ErrorText>two</ErrorText>
  <ErrorText className="font-bold">three</ErrorText> {/* 扩展样式 */}
</div>

2. 用 @apply 提取复用类 #

在 CSS 文件中使用 Tailwind 的 @apply 指令，将重复的类组合成自定义类，实现样式的集中管理。

示例：

/* styles/globals.css（需确保该文件被全局引入） */
.error-text {
  @apply text-[16px] text-red-700;
}

使用时直接引用自定义类：

<div>
  <p className="error-text">one</p>
  <p className="error-text">two</p>
  <p className="error-text">three</p>
</div>

如果需要组件级别的样式隔离，可结合 CSS Modules：

/* components/ErrorText.module.css */
.errorText {
  @apply text-[16px] text-red-700;
}

// components/ErrorText.jsx
import styles from "./ErrorText.module.css";

export default function ErrorText({ children }) {
  return <p className={styles.errorText}>{children}</p>;
}

3. 自定义 Tailwind 主题配置 #

将常用的颜色、字体大小、间距等样式变量统一配置在 tailwind.config.js 中，实现全局样式的单一数据源，后续修改只需调整配置文件。

示例：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontSize: {
        "body-sm": "16px", // 自定义字体大小
      },
      colors: {
        error: "#b91c1c", // 对应 red-700 的色值，可自定义命名
      },
    },
  },
  plugins: [],
};

使用时直接引用自定义主题变量：

<div>
  <p className="text-body-sm text-error">one</p>
  <p className="text-body-sm text-error">two</p>
  <p className="text-body-sm text-error">three</p>
</div>

4. 自定义工具类（@layer utilities） #

对于更通用的复用样式，可使用 @layer utilities 在全局 CSS 中定义自定义工具类，Tailwind 会将其纳入按需打包体系，避免冗余。

示例：

/* styles/globals.css */
@layer utilities {
  .error-text {
    @apply text-[16px] text-red-700 hover:text-red-900 transition-colors;
  }
}

使用方式与普通 Tailwind 类一致：

<p className="error-text">hover 会变色的错误文本</p>

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