[FE] Ice Breaking - Tailwind CSS: Building Dynamic and User-Enga

Bagaimana cara membuat desain yang responsif untuk perangkat mobile menggunakan Tailwind CSS?

• Menggunakan kelas-kelas khusus yang hanya berlaku untuk perangkat mobile.

• Menerapkan kelas utilitas dengan prefix seperti md: untuk menargetkan hanya layar medium ke atas.

• Memanfaatkan fitur viewport untuk menyesuaikan desain secara otomatis berdasarkan ukuran layar.

• Menulis aturan CSS @media query secara manual di dalam file konfigurasi Tailwind.

Dalam konteks penggunaan Tailwind CSS, bagaimana cara mengoptimalkan penggunaan kembali gaya? (Reusing Style)

• Menggunakan komponen-komponen yang telah ditentukan di dalam framework.

• Memanfaatkan @apply directive untuk menerapkan kumpulan gaya ke kelas lain.

• Membuat mixin CSS untuk setiap variasi gaya yang sering digunakan.

• Mengimpor stylesheet dari proyek lain.

Bagaimana Tailwind CSS memfasilitasi desain responsif?

• Dengan menyediakan kelas berbasis @media query yang harus ditambahkan secara manual ke setiap elemen.

• Melalui sistem grid yang kompleks dan susah untuk dimengerti.

• Dengan memungkinkan penggunaan modifier seperti sm:, md:, untuk menerapkan gaya berbeda pada berbagai ukuran layar.

• Menggunakan JavaScript untuk secara otomatis menyesuaikan gaya berdasarkan ukuran layar.

Apa keuntungan menggunakan Tailwind CSS untuk mengulang gaya?

• Membuat file CSS yang lebih besar karena setiap variasi memerlukan kelasnya sendiri.

• Mempercepat proses pengembangan dengan memungkinkan penggunaan kembali kelas utilitas yang sama di berbagai komponen.

• Meningkatkan waktu muat halaman karena mengurangi jumlah CSS yang harus diunduh.

• Membutuhkan pre-processor CSS seperti SASS atau LESS untuk mengulang gaya.

Bagaimana cara menambahkan gaya kustom di Tailwind CSS?

• Menambahkannya langsung ke dalam tag di setiap file HTML.

• Memodifikasi file konfigurasi Tailwind (tailwind.config.js) untuk menambahkan atau mengubah gaya.

• Menggunakan plugin eksternal untuk setiap gaya kustom yang dibutuhkan.

• Menulis CSS kustom dalam file terpisah dan mengimpornya ke dalam proyek.

Apa itu fungsi dan direktif dalam konteks Tailwind CSS?

• Kode JavaScript yang dapat dipanggil untuk mengubah komponen secara dinamis.

• Aturan CSS kustom yang dapat digunakan untuk mendefinisikan gaya dalam stylesheet.

• Fitur yang memungkinkan penggunaan fungsi dan variabel dalam file konfigurasi untuk menghasilkan desain yang lebih dinamis.

• Penggunaan fungsi PHP dalam file CSS untuk memperbarui gaya berdasarkan data server.

Bagaimana Tailwind CSS menangani transisi dan animasi?

• Hanya mendukung animasi CSS sederhana tanpa transisi.

• Menyediakan kelas utilitas yang memudahkan penerapan transisi dan animasi pada elemen.

• Memerlukan penulisan kembali aturan keyframe animasi untuk setiap proyek.

• Transisi dan animasi harus didefinisikan dalam JavaScript, bukan CSS.

Apa yang dimaksud dengan transformasi dalam Tailwind CSS?

• Mengubah nilai properti CSS secara langsung menggunakan JavaScript.

• Penerapan transformasi geometris seperti skala, rotasi, dan translasi menggunakan kelas utilitas.

• Transformasi data JSON menjadi komponen UI.

• Modifikasi elemen HTML melalui DOM scripting.

Bagaimana Tailwind CSS memfasilitasi interaktivitas?

• Dengan menyediakan kelas-kelas yang merespons berbagai jenis input pengguna seperti hover dan focus.

• Melalui penggunaan atribut HTML data- untuk menyimpan data yang dapat diakses via JavaScript.

• Menggunakan library JavaScript tambahan untuk menambahkan interaktivitas pada elemen.

• Menyediakan API backend untuk mengelola interaksi pengguna.

Apa yang terjadi jika kita ingin menambahkan efek hover yang kompleks di Tailwind CSS?

• Menambahkan kelas .hover: sebelum properti yang ingin dimodifikasi saat hover.

• Menggunakan pseudo-class CSS dalam file konfigurasi Tailwind.

• Menulis fungsi JavaScript yang menangani efek hover.

• Menerapkan animasi dan transisi melalui properti CSS eksternal.