Menggunakan pernyataan bersyarat pertanyaan media dalam CSS Tailwind

Question

Bagaimana untuk menyatakan ini

${window.scrollY > 0 ?
Adakah penyata bersyarat menyemak hanya untuk Tailwind pada saiz skrin sederhana atau besar? 

Answer 1

Anda boleh melakukannya dengan mudah dengan menambahkan kod berikut pada kod anda:

className={md:${window.scrollY > 0 ? "bg-slate-50" : "bg-transparent"}}

Inilah yang dilakukan oleh Tailwind. Jika tidak, anda boleh menulis CSS tersuai sendiri.

Sila ambil perhatian, sila pastikan anda memasukkan varian yang diperlukan dalam tailwind.config.js anda jika ia belum didayakan:

module.exports = {
      variants: {
        backgroundColor: ['responsive', 'hover', 'focus'],
        // ... other configurations
      },
}

Answer 2

${window.scrollY > 0 ? "max-md:bg-slate-50" : ""}

Anda juga boleh mengetahui lebih lanjut daripada dokumentasi Tailwind: https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint