Tailwind CSS中无法为span::after伪元素设置背景色的问题

问题分析 #

你遇到的核心问题是：Tailwind的peer-checked变体无法正确识别[&>span:after]这种自定义选择器来控制伪元素样式，但直接控制span元素（[&>span]:bg-primary）是正常的。这是因为Tailwind对自定义选择器中的伪元素解析有特定要求，且将伪元素作为独立变体使用更符合框架语法规范。

解决方案 #

提供两种可行的写法，均能实现需求：

方案1：修正自定义选择器的伪元素语法

将单冒号:after改为标准双冒号::after，Tailwind就能正确解析伪元素选择器：

import React, {HTMLProps} from 'react';
import {twMerge} from "tailwind-merge";

const Radio: React.FC<{ className?: string } & HTMLProps<HTMLInputElement>> = ({className = '', ...props}) => {
    return (
        <div className='w-full'>
            <input
                {...props}
                className={twMerge('peer', className)}
                type='radio'
            />
            <label className='cursor-pointer text-base flex gap-4 peer-checked:[&>span::after]:bg-primary' htmlFor={props.id}>
                <span className='h-7 w-7 rounded-full border-4 border-primary block
                flex items-center justify-center
                    after:block after:w-3.5 after:h-3.5 after:bg-primary after:rounded-full after:opacity-0
                '/>
                {props.label}
            </label>
        </div>
    );
};

export default Radio;

方案2：使用Tailwind伪元素变体（更推荐）

将伪元素作为独立的Tailwind变体（after:）使用，写法更符合框架风格，可读性更强：

import React, {HTMLProps} from 'react';
import {twMerge} from "tailwind-merge";

const Radio: React.FC<{ className?: string } & HTMLProps<HTMLInputElement>> = ({className = '', ...props}) => {
    return (
        <div className='w-full'>
            <input
                {...props}
                className={twMerge('peer', className)}
                type='radio'
            />
            <label className='cursor-pointer text-base flex gap-4 peer-checked:[&>span]:after:opacity-100 peer-checked:[&>span]:after:bg-primary' htmlFor={props.id}>
                <span className='h-7 w-7 rounded-full border-4 border-primary block
                flex items-center justify-center
                    after:block after:w-3.5 after:h-3.5 after:bg-gray-300 after:rounded-full after:opacity-0
                '/>
                {props.label}
            </label>
        </div>
    );
};

export default Radio;

这里将默认的after:bg-primary改为after:bg-gray-300，选中时切换为bg-primary，效果更直观。

关键说明 #

1. 确保你的Tailwind版本在v3.0以上，v3才完善了自定义变体与复杂选择器的支持。
2. Tailwind对伪元素的解析优先认可标准双冒号::after写法，单冒号:after可能导致解析异常。
3. 使用after:变体的写法更贴合Tailwind的设计思路，后续维护和扩展更方便。

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