Artikel ini akan mengilustrasikan metode untuk menggunakan breakpoint responsif di Tailwind CSS.
Bagaimana Cara Menggunakan Breakpoint Responsif di Tailwind?
Untuk menggunakan breakpoint responsif di Tailwind, gunakan pengubah responsif, seperti “ sm ”, “ md ”, “ lg ”, “ xl ' Dan ' 2xl ” dengan kelas lain dalam program HTML. Kemudian, lihat halaman web HTML dan ubah ukuran layar untuk memastikan breakpoint berfungsi dengan benar.
Langkah 1: Gunakan Pengubah Responsif dalam Program HTML
Buat program HTML dan gunakan pengubah responsif dengan gaya yang diinginkan. Misalnya, kami telah menggunakan ' sm ”, “ md ”, “ lg ”, “ xl ' Dan ' 2xl ” pengubah responsif:
< tubuh >
< div kelas = 'layar-h bg-fuchsia-400 sm:bg-merah muda-600 md:bg-hijau-700 lg:bg-ungu-500 xl:bg-teal-600 2xl:bg-kuning-500' >
< h1 kelas = 'text-7xl text-white text-center p-20' > Petunjuk Linux < / h1 >
< / div >
< / tubuh >
Di Sini:
- “ bg-fuchsia-400 ” kelas mengatur warna latar belakang ke fuchsia.
- “ sm:bg-merah muda-600 ” kelas menerapkan warna pink ke latar belakang untuk layar kecil.
- “ md:bg-hijau-700 ” kelas mengubah warna latar belakang menjadi hijau pada layar sedang.
- “ lg:bg-ungu-50 ” kelas mengatur warna latar belakang menjadi ungu untuk layar besar.
- “ xl:bg-teal-600 ” kelas menerapkan warna hijau ke latar belakang untuk layar ekstra besar.
- “ 2xl:bg-kuning-500 ” kelas mengubah warna latar belakang menjadi kuning pada layar 2xl.
Langkah 2: Verifikasi Keluaran
Lihat halaman web HTML untuk memverifikasi apakah breakpoint responsif berfungsi dengan baik atau tidak:
Pada halaman web di atas, dapat diamati bahwa warna halaman web berubah dengan ukuran layar sesuai dengan titik henti yang ditentukan.
Kesimpulan
Untuk menggunakan breakpoint responsif di Tailwind, gunakan pengubah responsif, seperti “ sm ”, “ md ”, “ lg ”, “ xl ' Dan ' 2xl ” dengan kelas lain dalam program HTML. Pengubah ini digunakan untuk menerapkan gaya berbeda ke elemen tertentu berdasarkan ukuran layar. Artikel ini telah mencontohkan metode untuk menggunakan breakpoint responsif di Tailwind CSS.