如何为Tailwind添加类似dark模式的自定义布尔类以复用React组件？

1. 配置Tailwind自定义变体 #

首先在tailwind.config.js中注册自定义变体，让Tailwind识别variant_a和variant_b前缀：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [
    function ({ addVariant }) {
      // 定义variant_a变体：匹配自身带有.variant_a类的元素
      addVariant('variant_a', '&.variant_a');
      // 定义variant_b变体：匹配自身带有.variant_b类的元素
      addVariant('variant_b', '&.variant_b');
    },
  ],
}

2. 编写可复用React组件 #

组件内部用自定义变体前缀编写差异化样式，同时接收className属性并挂载到根元素——调用时传入的变体类名会触发对应样式：

import React from 'react';

const ReusableCard = ({ className, children }) => {
  return (
    <div className={`
      px-6 py-4 rounded-lg border transition-all
      // 变体A样式
      variant_a:bg-blue-500 variant_a:border-blue-600 variant_a:text-white
      // 变体B样式
      variant_b:bg-orange-100 variant_b:border-orange-300 variant_b:text-orange-800
      ${className}
    `}>
      {children}
    </div>
  );
};

export default ReusableCard;

3. 调用组件指定变体 #

调用时只需在className中传入对应变体类名，即可切换样式：

// 使用变体A
<ReusableCard className="variant_a">
  这是蓝色主题的卡片
</ReusableCard>

// 使用变体B
<ReusableCard className="variant_b">
  这是橙色主题的卡片
</ReusableCard>

这种逻辑和Tailwind内置的dark:变体完全一致，既保留了组件复用性，又能通过简洁的类名切换样式，比拆分组件更高效。

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