Tailwind CSS

Tailwind CSS adalah framework CSS utility-first yang mengatur gaya halaman dengan class-class kecil berfungsi tunggal yang ditulis langsung di HTML. Class seperti p-4, text-center, dan bg-blue-500 masing-masing mengatur satu gaya. Developer menggabungkan class-class ini untuk membuat desain apa pun tanpa banyak menulis CSS sendiri.

CSS utility-first berarti membangun desain dari banyak class kecil yang masing-masing mengerjakan satu hal, alih-alih menulis class khusus untuk setiap komponen. Sebuah tombol mendapat tampilannya dari class untuk padding, warna, border radius, dan ketebalan font. Pendekatan ini menjaga gaya tetap dekat dengan markup dan menghindari stylesheet besar yang terus membengkak.

Developer memilih Tailwind CSS karena mempercepat penataan gaya dan menjaga file CSS akhir tetap kecil. Tidak perlu lagi mengarang nama class atau berpindah antara file HTML dan CSS untuk setiap perubahan. Tailwind CSS juga memberi skala yang konsisten untuk spasi, warna, dan ukuran font, sehingga desain tetap rapi.

Tailwind CSS memberi utility class tingkat rendah untuk membangun desain sendiri, sedangkan Bootstrap memberi komponen siap pakai seperti navbar, card, dan modal. Bootstrap lebih cepat untuk tampilan standar dengan sedikit kerja desain. Tailwind CSS lebih baik ketika proyek membutuhkan desain unik sendiri tanpa harus melawan tema bawaan.

Tailwind CSS diinstal melalui npm lalu dihubungkan ke alat build proyek, seperti Vite, PostCSS, atau Tailwind CLI. Di Tailwind CSS versi 4, Anda menambahkan paketnya lalu mengimpornya di bagian atas file CSS utama dengan @import "tailwindcss". Panduan instalasi resminya berisi langkah singkat untuk setiap framework umum, termasuk Laravel, Next.js, dan Vite.

Tailwind CSS cocok untuk pemula yang sudah memahami properti dasar CSS seperti margin, padding, flexbox, dan grid. Setiap class Tailwind mewakili properti CSS yang sebenarnya, jadi mempelajari CSS lebih dulu membuat class-classnya mudah dibaca. Pemula yang melewatkan dasar CSS sering kesulitan memperbaiki layout di Tailwind CSS.

Sebagian besar developer yang menguasai CSS bisa produktif dengan Tailwind CSS dalam beberapa hari. Nama class-nya mengikuti pola yang jelas, sehingga mempelajari satu kelompok class membantu menebak sisanya. Menguasai varian responsif, tema custom, dan pola komponen membutuhkan beberapa minggu pemakaian nyata.

Desain responsif di Tailwind CSS bekerja dengan menambahkan prefix breakpoint seperti sm:, md:, dan lg: di depan utility class apa pun. Tailwind CSS bersifat mobile-first, sehingga class tanpa prefix berlaku untuk semua layar, dan class dengan prefix berlaku mulai breakpoint itu ke atas. Contohnya, text-sm md:text-lg memberi teks kecil di ponsel dan teks lebih besar di layar yang lebih lebar.

Breakpoint bawaan di Tailwind CSS adalah sm pada 640 piksel, md pada 768 piksel, lg pada 1024 piksel, xl pada 1280 piksel, dan 2xl pada 1536 piksel. Setiap breakpoint adalah lebar minimum, sesuai dengan pendekatan mobile-first Tailwind. Sebuah proyek bisa mengubah nilai ini atau menambahkan breakpoint baru di pengaturan temanya.

Dark mode di Tailwind CSS ditambahkan dengan menaruh prefix dark: di depan class apa pun, seperti dark:bg-gray-900. Secara bawaan, Tailwind CSS mengikuti pengaturan sistem operasi pengunjung. Agar pengguna bisa mengganti dark mode lewat tombol, Anda mengatur varian dark agar bergantung pada class atau atribut data di halaman.

Di Tailwind CSS versi 4, warna dan font dikustomisasi dengan variabel CSS di dalam blok @theme pada file CSS utama. Variabel seperti --color-brand otomatis membuat class seperti bg-brand dan text-brand. Versi lama memakai file tailwind.config.js untuk tugas yang sama, dan cara itu masih berfungsi di versi 4 melalui opsi kompatibilitas.

Tailwind CSS bisa membuat HTML terlihat padat, karena satu elemen bisa membawa banyak class. Sebagian besar tim mengatasinya dengan mengubah pola yang berulang menjadi komponen di framework mereka, seperti komponen Blade, React, atau Vue. Konsekuensinya, gaya tetap terlihat di samping markup, sehingga perubahan menjadi cepat dan aman.

Tailwind CSS menjaga file CSS tetap kecil dengan memindai file-file proyek dan hanya membuat class yang benar-benar dipakai. Utility yang tidak dipakai tidak pernah masuk ke stylesheet akhir. File CSS production yang dibangun dengan Tailwind CSS biasanya berukuran kecil, bahkan untuk situs besar.

Directive @apply di Tailwind CSS memungkinkan Anda memakai utility class Tailwind di dalam aturan CSS Anda sendiri. Directive ini berguna untuk menata konten yang tidak Anda kendalikan, seperti HTML yang dihasilkan text editor. Tim Tailwind menyarankan memakainya seperlunya, karena komponen biasanya cara yang lebih rapi untuk memakai ulang gaya.

Ya, Tailwind CSS bekerja baik bersama Laravel, dan proyek Laravel baru sudah disiapkan untuk memakainya dengan Vite. Anda menulis class Tailwind di template Blade, lalu Vite membangun CSS akhirnya. Starter kit Laravel juga memakai Tailwind CSS untuk halaman login dan dashboard-nya.

Ya, Tailwind CSS bisa dipakai bersama React, Vue, Svelte, dan sebagian besar framework JavaScript lainnya. Class ditulis di markup komponen melalui className di React atau class di Vue. Karena setiap komponen menyimpan class-nya sendiri, Tailwind CSS sangat cocok dengan framework berbasis komponen.

Tailwind CSS tidak berpengaruh langsung pada peringkat pencarian, tetapi bisa membantu SEO secara tidak langsung dengan menjaga file CSS tetap kecil dan halaman tetap cepat. Kecepatan halaman adalah bagian dari sinyal page experience Google. Konten, struktur halaman, dan semantik HTML tetap jauh lebih penting daripada alat penataan gayanya.

Arbitrary value di Tailwind CSS memungkinkan Anda memakai nilai persis yang tidak ada di tema dengan menuliskannya di dalam kurung siku. Contohnya, w-[37%] atau top-[117px] langsung membuat class untuk nilai tersebut. Arbitrary value berguna untuk kasus sekali pakai, tetapi nilai yang sering dipakai sebaiknya dimasukkan ke tema.

State hover dan focus di Tailwind CSS bekerja dengan menambahkan prefix state seperti hover:, focus:, atau active: di depan utility class. Contohnya, bg-blue-500 hover:bg-blue-600 membuat tombol lebih gelap saat kursor berada di atasnya. Prefix bisa digabungkan dengan breakpoint dan dark mode, seperti md:hover:underline.

Tidak, Tailwind CSS sendiri hanya menyertakan utility class, bukan komponen siap pakai seperti modal atau navbar. Komponen jadi tersedia dari koleksi terpisah, seperti Tailwind Plus resmi atau library komunitas seperti daisyUI dan Flowbite. Banyak tim membangun kumpulan komponen kecil sendiri di atas utility tersebut.

Ya, Tailwind CSS mendukung layout right-to-left melalui varian rtl: dan ltr: serta logical utility class. Class logis seperti ms-4 dan pe-2 mengatur margin dan padding di awal atau akhir baris, sehingga otomatis berbalik dalam bahasa Arab. Dengan begitu, satu markup bisa dipakai untuk halaman berbahasa Inggris maupun Arab.

Tailwind CSS versi 4 memindahkan konfigurasi ke dalam CSS dengan blok @theme dan satu baris @import. Versi 4 juga membawa mesin build yang lebih cepat, deteksi file konten otomatis, dan fitur CSS modern seperti cascade layers. Sebagian besar proyek yang meng-upgrade dari versi 3 bisa memakai alat upgrade resmi untuk memperbarui kodenya.

Tailwind CSS mungkin kurang tepat ketika proyek membutuhkan kumpulan lengkap komponen jadi dengan hampir tanpa desain khusus, atau ketika tim lebih suka menulis CSS klasik. Halaman statis kecil dengan sedikit gaya mungkin tidak membutuhkan framework sama sekali. Tailwind CSS paling bermanfaat pada proyek dengan desain khusus yang terus berkembang.

Class Tailwind CSS tetap rapi dengan mengubah pola yang berulang menjadi komponen dan mengurutkan class dalam urutan yang konsisten. Plugin Prettier resmi untuk Tailwind CSS mengurutkan class secara otomatis saat file disimpan. Mendefinisikan warna merek dan spasi di tema juga membuat class tetap pendek dan konsisten.

Ya, Tailwind CSS adalah open source dengan lisensi MIT, sehingga bisa dipakai di proyek pribadi maupun komersial. Lisensinya mengizinkan pemakaian, perubahan, dan distribusi Tailwind CSS di produk apa pun. Source code-nya terbuka di GitHub, tempat siapa pun bisa membacanya dan melaporkan masalah.