在 TailwindCSS 中串起响应 类
String together responsive classes in TailwindCSS
我一直在尝试 Google 这个，但我要么没有使用正确的术语，要么还没有人问过我的问题。
问题：有没有办法在 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 的新手，只是想问问这是否可行。
简单的简短回答是否定的，这在 Tailwind.css 中是不可能的。
唯一可行的方法是 creating the classes yourself or suggesting it on their github。
为此，tailwind CSS 文件必须定义 md:grid-cols-2:col-gap-12:py-1 class。它还必须为每个断点生成 classes 所有其他可能的排列（最多达到任意最大数量的组合实用程序）。 md 已经有 2877 个 classes，所以一旦你开始组合它们，它会很快变大。仅考虑您在此处拥有的最多 3 个实用程序将导致 md 的大约 2400 万个排列以及每个其他断点的排列相同，因此我认为这不切实际。
这实际上是 Windi.css 中解决的问题，您可以像这样使用组变体：
text-blue md:text-green lg:(p-2 m-2 text-red-400)
目前，似乎 Tailwind 没有添加此功能，但如果他们不尽快这样做，我会感到非常惊讶。能够设置断点确实有助于使您 class 列表保持整洁......尤其是当顺风可能导致一些很长的列表时。
如果有机会的话，看看 Windi，这是一个很好的项目，但我确实认为 Tailwind 很快就会引入他们的大部分（好的）功能。
帮助我实现这一目标的另一件事是使用 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。但是找不到内联样式的方法。
我一直在尝试 Google 这个，但我要么没有使用正确的术语，要么还没有人问过我的问题。
问题：有没有办法在 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 的新手，只是想问问这是否可行。
简单的简短回答是否定的，这在 Tailwind.css 中是不可能的。
唯一可行的方法是 creating the classes yourself or suggesting it on their github。
为此，tailwind CSS 文件必须定义 md:grid-cols-2:col-gap-12:py-1 class。它还必须为每个断点生成 classes 所有其他可能的排列（最多达到任意最大数量的组合实用程序）。 md 已经有 2877 个 classes，所以一旦你开始组合它们，它会很快变大。仅考虑您在此处拥有的最多 3 个实用程序将导致 md 的大约 2400 万个排列以及每个其他断点的排列相同，因此我认为这不切实际。
这实际上是 Windi.css 中解决的问题，您可以像这样使用组变体：
text-blue md:text-green lg:(p-2 m-2 text-red-400)
目前，似乎 Tailwind 没有添加此功能，但如果他们不尽快这样做，我会感到非常惊讶。能够设置断点确实有助于使您 class 列表保持整洁......尤其是当顺风可能导致一些很长的列表时。
如果有机会的话，看看 Windi，这是一个很好的项目，但我确实认为 Tailwind 很快就会引入他们的大部分（好的）功能。
帮助我实现这一目标的另一件事是使用 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。但是找不到内联样式的方法。