前言

今天上班的时候遇到一个问题： tailwind 的子选择器失效了！一个细碎的小问题卡了我半个钟，特此记录一下

正文

遇到问题后，我第一时间查了官网... 擦，我写的很标准啊。又去查了 github issue 和 stackOverflow，相关有描述到tailwind@1.x 版本时需要一些配置才能生效，但已经 2024 年了不会还有人用着远古 tailwind 吧

@1.x配置参考文档

我就知道事情不会这么简单...

线索断了，现在该从哪里入手呢？既然官网和 issue 都没有提到这个问题，那大概率不是他的问题，而是我的问题

细思恐极，我赶紧检查我的代码逻辑：

擦，对的不能再对了，这个时候我突然想到了last-child的定义：同级元素中，相同标签的最后一个元素

我赶紧检查 html 元素，发现果然下面还有一个 div 元素，破案了。。。原来样式生效到最后那个div 元素了

总结

last-child这类的选择器需要特别注意 html 结构中是否有其他相同标签的兄弟元素，会影响样式的生效目标。如这种细碎需要注意的点，需要特别注意留下记忆点，这样下次再遇到才能快速反应，减少 debug 时间～

最后我的代码这里改写成了ul-li，这样语义化标签也有利于 SEO🔚