在Tailwind中使用状态变量时如何运用非运算符实现样式？

要实现当data-position不等于mid时应用animate-fade-in，直接用Tailwind的属性非匹配选择器即可，这是Tailwind v3.2及以上版本支持的语法：

<h1 data-position="left" class="data-[position!=mid]:animate-fade-in data-[position=mid]:animate-fade-out">content</h1>

原理说明 #

• data-[position!=mid]会匹配所有data-position属性值不为mid的元素，不管是left还是right都会触发animate-fade-in动画
• 同时保留原来的data-[position=mid]:animate-fade-out，实现两种状态的区分

旧版本兼容方案（如果使用Tailwind v3.2以下） #

如果你的Tailwind版本不支持非运算符，可以直接针对两个有效值分别设置：

<h1 data-position="left" class="data-[position=left]:animate-fade-in data-[position=right]:animate-fade-in data-[position=mid]:animate-fade-out">content</h1>

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