有几种方法可以减少 Tailwind 中重复和冗长的 className：

1. 使用 @apply 语法

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

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white py-2 px-4 rounded;
}

然后在组件中使用：

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

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

2. 封装组件

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

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

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

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

3. 使用 clsx 或 classnames 库

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

import clsx from "clsx";

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

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

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

4. 使用 Tailwind 的 theme 配置

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#3490dc",
      },
    },
  },
};

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

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

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

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

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