在 TailwindCSS 中将响应式类串在一起

Posted 2023-03-07

【中文标题】在 TailwindCSS 中将响应式类串在一起

【英文标题】：String together responsive classes in TailwindCSS

【发布时间】：2020-06-19 09:10:06

【问题描述】：

我一直在尝试用谷歌搜索这个，但我要么没有使用正确的术语，要么还没有人问过我的问题。

问题：有没有办法在 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 的新手，只是想问问这是否可能。

【参考方案1】：

简单的回答是否定的，这在Tailwind.css 中是不可能的。

唯一可行的方法是creating the classes yourself 或建议on their github。

【参考方案2】：

为此，tailwind CSS 文件必须定义一个md:grid-cols-2:col-gap-12:py-1 类。它还必须为每个断点生成所有其他可能的排列（最多任意最大数量的组合实用程序）。 md 已经有 2877 个类，所以一旦你开始组合它们，这将很快变得很大。仅考虑您在此处使用的最多 3 个实用程序将导致 md 的大约 2400 万个排列，而其他断点的排列相同，所以我认为这不切实际。

【参考方案3】：

这实际上是在Windi.css 中解决的问题，您可以使用这样的组变体：

text-blue md:text-green lg:(p-2 m-2 text-red-400)

目前，顺风似乎没有添加这个，但如果他们不尽快这样做，我会感到非常惊讶。能够设置断点确实有助于保持类列表整洁......尤其是当顺风可能导致一些长长的列表时。

如果有机会，请查看 Windi，这是一个很好的项目，但我确实认为 Tailwind 很快就会推出他们的大部分（好）功能。

【参考方案4】：

帮助我实现这一目标的另一件事是使用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 杂乱无章。但是找不到内联样式的方法。