我一直在尝试用谷歌搜索这个问题，但我要么没有使用正确的术语，要么还没有人问我的问题。问题：有没有办法在 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 的新手，只是想问一下这是否可行。
4 回答
守候你守候我
TA贡献1802条经验 获得超10个赞
这实际上是Windi.css中解决的问题，您可以使用如下的组变体：
text-blue md:text-green lg:(p-2 m-2 text-red-400)
目前，Tailwind 似乎还没有添加此功能，但如果他们不尽快这样做，我会感到非常惊讶。能够设置断点确实有助于保持类列表整洁......尤其是当顺风会导致一些很长的列表时。
如果有机会的话，请查看 Windi，这是一个很好的项目，但我确实认为 Tailwind 很快就会推出他们的大部分（好的）功能。
倚天杖
TA贡献1828条经验 获得超3个赞
为此，tailwind CSS 文件必须定义一个md:grid-cols-2:col-gap-12:py-1类。它还必须为每个断点生成所有其他可能排列的类（最多为组合实用程序的任意最大数量）。已经有 2877 个类md，所以一旦你开始组合它们，它就会很快变大。仅仅考虑这里最多 3 个实用程序就会导致大约 2400 万个排列，md并且每个断点的排列都是相同的，所以我认为这不切实际。
慕哥6287543
TA贡献1831条经验 获得超10个赞
帮助我实现这一目标的另一件事是使用该screen指令。
https://tailwindcss.com/docs/functions-and-directives#screen
@media screen(md) {
/* css to be overriden for >md screens */
}
或者，
@screen md {
/* css to be overriden for >md screens */
}
这样，响应式设计就不会扰乱独立的 CSS。但找不到内联样式的方法。
狐的传说
TA贡献1804条经验 获得超3个赞
由于这个问题类似于 tailwind CSS 的组变体问题，请在此处查看我的详细答案 https://stackoverflow.com/a/76387833/9371093
- 4 回答
- 0 关注
- 154 浏览
添加回答
举报
0/150
提交
取消