已解決430363個問題，去搜搜看，總會有你想問的

在 TailwindCSS 中將響應式類串在一起

首頁猿問在 TailwindCSS...

在 TailwindCSS 中將響應式類串在一起

慕桂英4014372 2023-08-21 16:07:21

我一直在嘗試用谷歌搜索這個問題，但我要么沒有使用正確的術語，要么還沒有人問我的問題。問題：有沒有辦法在 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 回答

MM們

TA貢獻1886條經驗獲得超2個贊

簡單的回答是否定的，這在Tailwind.css.

唯一可能的方法是自己創建類或在他們的 github 上建議它。

反對回復 2023-08-21

守候你守候我

TA貢獻1802條經驗獲得超10個贊

這實際上是Windi.css中解決的問題，您可以使用如下的組變體：

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

目前，Tailwind 似乎還沒有添加此功能，但如果他們不盡快這樣做，我會感到非常驚訝。能夠設置斷點確實有助于保持類列表整潔......尤其是當順風會導致一些很長的列表時。

如果有機會的話，請查看 Windi，這是一個很好的項目，但我確實認為 Tailwind 很快就會推出他們的大部分（好的）功能。

反對回復 2023-08-21

倚天杖

TA貢獻1828條經驗獲得超3個贊

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

反對回復 2023-08-21

慕哥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。但找不到內聯樣式的方法。

反對回復 2023-08-21

狐的傳說

TA貢獻1804條經驗獲得超3個贊

由于這個問題類似于 tailwind CSS 的組變體問題，請在此處查看我的詳細答案 https://stackoverflow.com/a/76387833/9371093

反對回復 2023-08-21

4 回答
0 關注
307 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 TailwindCSS 中將響應式類串在一起

在 TailwindCSS 中將響應式類串在一起

4 回答

添加回答