有時，但不是所有時候，當我使用Tailwind CSS(在一個帶有webpack的React項目中)時，我嘗試應用如下的類:

<p className="text-2xl sm:text-3xl">Some text</p>

預期行為: 按照順風的移動優(yōu)先設計，我的文本應該是& quot2xl & quot在超小/移動屏幕上調(diào)整大小，然后最小寬度為640像素，它將被調(diào)整為& quot3xl & quot

實際結果: & quot3xl & quot640px媒體查詢斷點處的規(guī)則在CSS中被讀取，但在Chrome dev tools中被刪除，而& quot2xl & quot規(guī)模壓倒了它。這也許表明2xl規(guī)則在葉柵中具有更大的特異性，這與順風的預期行為相反。

-直接引自順風公司的文件:

//Use unprefixed utilities to target mobile, and override them at larger breakpoints
<div class="text-center sm:text-left"></div>

看看上面我的規(guī)則的結果...

我很難理解為什么它可能不會應用這種風格，因為我使用了我應該使用的順風。

對嗎？

解決方案是這樣的:

我使用的是我用webpack中的樣式加載器導入的材料Tailwind庫。首先，我使用的是Tailwind v3，而這個庫依賴于Tailwind v2。此外，最主要的是，它被加載到一個樣式標記中，并在main.css文件之后被引用。難怪它會引發(fā)問題。

我試著切換加載/導入過程，以便將它與我的主Tailwind庫一起加載到main.css文件中。它導致媒體查詢問題消失，但是組件變得混亂，可能是由于Tailwind的v3和v2之間的不兼容。

刪除該庫后，它將按預期工作。我沒有使用這個庫，而是根據(jù)需要創(chuàng)建了自己的定制組件，沒有實現(xiàn)嚴重依賴和破壞應用程序的庫的麻煩。

已解決:)

添加元標簽固定地雷:

<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />