我一直在谷歌上搜索這個問題，但是要么是我用詞不當，要么是還沒有人問過我這個問題。

問題:在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中是不可能的。

唯一可行的方法是自己創建類或者在github上推薦。

為此，tailwind CSS文件必須定義一個md:grid-cols-2:col-gap-12:py-1類。它還必須為每個斷點生成所有其他可能置換的類(達到任意最大數量的組合實用程序)。已經有2877個md類，所以一旦你開始合并它們，它將會很快變大。僅僅考慮你這里的3個實用程序，就會產生大約2400萬個md排列，并且每個斷點都是一樣的，所以我不認為這是可行的。

這實際上是在Windi.css中解決的問題，您可以像這樣使用組變量:

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

目前，看起來tailwind還沒有加入這一點，但如果他們不盡快這么做，我會感到非常驚訝。能夠設置斷點確實有助于保持你的類列表整潔...尤其是順風會導致很長很長的清單。

如果你有機會，可以看看Windi，這是一個很好的項目，但我確實認為Tailwind不久將會引入他們的大部分(好)功能。

另一件幫助我做到這一點的事情是使用屏幕指令。

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變得雜亂。但是無法找到內聯樣式的方法。

由于這個問題類似于順風社的群體變異問題，請在這里查看我的詳細回答 https://stackoverflow.com/a/76387833/9371093