jto*_*eck 5 html css responsive tailwind-css
我一直在尝试用谷歌搜索这个问题,但我要么没有使用正确的术语,要么还没有人问我的问题。
问题:有没有办法在 TailwindCSS 中堆叠响应式类?我想做的是改变类似的东西:
class="grid gap-12 md:grid-cols-2 md:col-gap-12 md:py-16 lg:grid-cols-3 lg:py-12"
更像是:
class="grid gap-12 md:grid-cols-2:col-gap-12:py-16 lg:grid-cols-3:py-12"
我意识到它并没有减少太多的行长度,但对我来说,将响应类分组在一起似乎更明智一些。我是 TailwindCSS 的新手,只是想问一下这是否可行。
小智 5
这实际上是Windi.css中解决的问题,您可以使用如下的组变体:
text-blue md:text-green lg:(p-2 m-2 text-red-400)
Run Code Online (Sandbox Code Playgroud)
目前,Tailwind 似乎还没有添加此功能,但如果他们不尽快这样做,我会感到非常惊讶。能够设置断点确实有助于保持类列表整洁......尤其是当顺风会导致一些很长的列表时。
如果有机会的话,请查看 Windi,这是一个很好的项目,但我确实认为 Tailwind 很快就会推出他们的大部分(好的)功能。