如何在TailwindCSS配置文件中创建自定义复合类？

要实现将多个Tailwind原子类合并为单个自定义类（比如flex justify-between items-center → flexBetween），你需要在tailwind.config.js中通过**自定义工具类（Utilities）**配置，批量创建推荐用插件方式实现，具体步骤如下：

方法1：直接在theme.extend.utilities中定义（适合少量类） #

在配置文件的theme.extend下添加utilities对象，直接写入自定义类的CSS属性：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      utilities: {
        '.flexBetween': {
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        },
        '.flexCenter': {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        },
        // 继续添加更多自定义类...
      },
    },
  },
  plugins: [],
}

方法2：通过插件批量注册（适合数十个类） #

如果需要创建大量自定义类，推荐用Tailwind的插件API批量添加，更易维护：

1. 先定义所有自定义类的集合（可单独放在工具文件中管理）：

// 示例：src/utils/tailwindCustomClasses.js
module.exports = {
  '.flexBetween': {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  '.flexStart': {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  '.flexEnd': {
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  // 批量添加更多自定义类...
}

2. 在tailwind.config.js中导入并通过addUtilities注册：

/** @type {import('tailwindcss').Config} */
const customUtilities = require('./src/utils/tailwindCustomClasses')

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      // 注册自定义类，可选添加响应式/hover等变体
      addUtilities(customUtilities, { variants: ['responsive', 'hover'] })
    },
  ],
}

关键注意事项 #

• 自定义类名必须以.开头，遵循CSS类名规则；
• 如果需要响应式变体（如md:flexBetween），在addUtilities的第二个参数中指定variants即可；
• 配置完成后，重启Tailwind的构建工具（如Vite、Webpack），确保新的自定义类被生成。

使用时直接在HTML元素的className中写自定义类名即可：

<div className="flexBetween p-4">
  <!-- 内容 -->
</div>

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