React中Tailwind CSS after:content-[]动态赋值失效问题求助

Tailwind的after:content-[]类是静态构建的，编译时工具会扫描所有明确的content值生成对应CSS规则。你用模板字符串${type2}动态插入的内容在编译时是未知的，所以Tailwind不会生成对应的类，浏览器无法应用该样式。

解决方案：使用CSS自定义属性传递动态值 #

这是Tailwind支持动态content的标准方法，步骤如下：

1. 在目标元素上通过React的style属性定义CSS变量，将动态文本值作为变量值（需包裹双引号，符合CSS content属性的字符串要求）。
2. 在Tailwind的after:content-[]类中，用var(--变量名)引用这些动态变量。

修改后的完整组件代码 #

function ToggleOnSteroid({changeType, type1, type2}) {
    return (
        <div className="w-full">
            <label className="relative w-full inline-flex items-center cursor-pointer">
                <input 
                    className="sr-only peer" 
                    value="" 
                    type="checkbox" 
                    onChange={(e) => {
                        changeType(e.target.checked 
                            ? type1.toLowerCase().replaceAll(' ','-') 
                            : type2.toLowerCase().replaceAll(' ','-')
                        );
                    }}
                />
                <div 
                    style={{
                        '--unchecked-content': `"${type1}"`,
                        '--checked-content': `"${type2}"`
                    }}
                    className={`peer rounded-md outline-none duration-100 after:duration-500 w-full h-[52px] bg-white border border-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#B5A352]  
                        after:content-[var(--unchecked-content)] 
                        after:absolute after:outline-none after:rounded-md after:h-[44px] after:w-[120px] after:bg-[#B5A352] after:top-1 after:left-1 after:flex after:justify-center after:items-center after:text-white after:font-bold 
                        peer-checked:after:translate-x-24 
                        peer-checked:after:content-[var(--checked-content)] 
                        peer-checked:after:border-white`}
                >
                </div>
            </label>
        </div>
    )
}

代码说明 #

• 通过style属性定义--unchecked-content和--checked-content变量，分别对应开关未选中/选中状态的文本，值用双引号包裹以符合CSS语法。
• 替换原静态content类为变量引用，实现动态文本的渲染，无论type1/type2传入什么值，伪元素内容都会正确生效。

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