斷點值被 tailwindcss 上的移動值覆蓋

Question

我遇到了一個問題，但我尚未在任何地方找到任何問題。

當我在行動裝置上使用內邊距或邊距，並且想要在較大螢幕上更改這些內邊距/邊距時，我為行動裝置設定的基本值將保持不變，並覆蓋不同斷點處的特定值。

這是我在偵錯器中可以看到的內容： 如您所看到的 py-3 值，它保留並覆蓋適用於 md 斷點的 py-0。

---

這是行動版

---

這是桌面版本

---

這是我的程式碼，py-3 和 md:py-0 套用到按鈕：

<div className="...">
    {languages.map((lng) => (
        <button className="px-2.5 py-3 md:py-0 text-xs leading-5 text-gray-500 text-center">
            {lng.name}
        </button>
    ))}
</div>

我使用 taildwindcss 進行經典的 next.js 安裝，沒有任何擴充功能/主題替換。我的 css 檔案中沒有任何地方可以重寫這些類別。

我有什麼遺漏的嗎？

編輯：我嘗試應用「！」在我的 py-0 前面： md:!py-0 但它仍然是一樣的。即使正確地添加了 !important 關鍵字，它仍然會被覆蓋。

Answer 1

!important 賦值會覆寫以下內容（因此在正常情況下 覆蓋）@media { }

#讓您的 .py-3 { } 正確顯示，無需需要 !important。