计算后的CSS含义解析：Tailwind自定义类的Chrome DevTools显示疑问

问题详情 #

我有一个可处于open或closed状态的组件，组件会根据状态添加对应属性（如data-state=open）。我使用Tailwind的内联CSS语法，实现了当组件处于data-state=open状态时旋转其子SVG组件的效果，代码如下：

<Component className="[&[data-state=open]>svg]:rotate-180">
    <svg />
</Component>

这段代码功能正常，但在Chrome开发者工具中看到的计算后CSS格式很奇怪，看起来等效于：

[data-state=open]>svg:rotate-180[data-state=open]>svg {
    ...
}

想知道这是什么情况？是有效的CSS语法，还是Chrome DevTools的显示技巧？

解答 #

这是Chrome DevTools对Tailwind生成的特殊类名的显示格式问题，既不是有效的标准CSS，也不是Tailwind实际生成的代码。

具体解析 #

1. 你编写的Tailwind自定义变体[&[data-state=open]>svg]:rotate-180，Tailwind实际生成的CSS是类似这样的：

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
    transform: rotate(180deg);
}

其中.\[\&\[data-state\=open\]\>svg\]\:rotate-180是Tailwind为这个自定义选择器生成的转义类名，后面的[data-state=open]>svg才是实际生效的选择器逻辑——匹配带有data-state=open属性的组件的直接子元素svg。

2. Chrome DevTools在渲染这类包含特殊字符的类名时，会错误地将类名中的选择器片段与实际选择器拼接展示，从而出现了重复的[data-state=open]>svg部分。这只是DevTools的显示bug，不影响代码的实际功能。

3. 你使用的是Tailwind官方支持的自定义变体语法，用来基于父元素的状态样式化子元素，写法本身完全有效，既然代码能正常工作，就无需在意DevTools的异常显示。

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