TailwindCss-伪类伪元素媒体查询与子类组合在一个类中

Question

TailwindCss-伪类伪元素媒体查询与子类组合在一个类中

如何在一个子组中组合重复的前缀。

例如。

根据顺风文档，当我们想向禁用的输入添加样式时，我们应该使用这种代码的平静

<label class="block">
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white
border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 
disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500
"/>
</label>
</form>

我想用这种

<label class="block">
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white
border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:(outline-none border-sky-500 ring-1 ring-sky-500)
disabled:(bg-slate-50 text-slate-500 border-slate-200 shadow-none)
invalid:(border-pink-500 text-pink-600)
focus:invalid:(border-pink-500 ring-pink-500)
"/>
</label>
</form>

如果不可能每次都重复单词focus、disabled等，只需为每个组件使用一次选择器。

Answer 1

不幸的是，您无法包装样式。你可以做的一些改进是：

1. 创建"基本部件"；使用默认样式，然后通过扩展类仅添加本地样式。然而，当您使用JS框架/库(如react、angular等)时，这种方法会更容易

2. 移动CSS文件中的commons样式并使用顺风指令。然后，在class属性中，使用CSS中定义的类进行通用样式。然后使用普通顺风类添加本地样式。