Nilai titik putus ditimpa oleh nilai pergerakan pada tailwindcss

Question

Saya ada masalah yang belum jumpa di mana-mana.

Apabila saya menggunakan padding atau margin pada mudah alih dan ingin menukar padding/margin tersebut pada skrin yang lebih besar, nilai asas yang saya tetapkan untuk mudah alih kekal sama dan override tidak memecahkan nilai A tertentu pada titik tersebut.

Ini yang saya boleh lihat dalam penyahpepijat: Seperti yang anda boleh lihat nilai py-3, ia mengekalkan dan mengatasi py-0 yang digunakan pada titik putus md.

---

Ini adalah versi mudah alih

---

Ini adalah versi desktop

---

Ini kod saya, py-3 和 md:py-0 digunakan pada butang:

<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>

Saya menggunakan taildwindcss untuk pemasangan next.js klasik tanpa sebarang penggantian sambungan/tema. Tiada tempat dalam fail css saya di mana saya boleh mengatasi kelas ini.

Adakah saya terlepas apa-apa?

Sunting: Saya cuba memohon "!" dalam py-0 前面： md:!py-0 saya tetapi ia masih sama. Walaupun kata kunci !important ditambah dengan betul, kata kunci itu masih akan ditindih.

Answer 1

!important Tugasan mengatasi perkara berikut (jadi dalam keadaan biasa Liputan)@media { }

Dapatkan .py-3 { } anda untuk dipaparkan dengan betul, tanpa memerlukan .py-3 { } 正确显示，无需需要 !important.