Introduction

Pada umumnya, istilah headless UI merujuk pada komponen antarmuka pengguna (UI) yang dapat digunakan tanpa adanya tampilan atau antarmuka pengguna grafis yang sudah dibangun. Ini berarti komponen tersebut dirancang untuk memberikan fungsionalitas tertentu tanpa ketergantungan pada elemen-elemen visual atau tata letak tertentu.

Tidak main-main, pertumbuhan TailwindCSS cukup spektakuler.

Konsep yang diusung oleh TailwindCSS memang cukup spektakuler, yaitu utility first dimana kita tidak perlu meninggalkan halaman html/jsx kita untuk bisa menuliskan css yang kita mau.

Mungkin sedikit mirip kali ya dengan CSS-in-JS atau styled component yang mana tidak perlu keluar dari file jsx/html kita untuk melakukan styling pada komponen kita.

Kenapa Pakai Tailwind CSS?

Saya sebelumnya pernah pakai beberapa framework yang berbasis komponen seperti Bootstrap CSS, Bulma, MaterializeCSS, namun merasa kurang puas dengan framework ini.

Mengapa?

Pertama saya merasa kurang bebas kustomisasi komponennya. Kalau mau custom, harus override class yang udah ada. Kedua, kode CSS dari komponen yang nggak dipakai akan ikut nyangkut di CSS hasil build. Ini membuat ukuran CSS-nya jadi lebih besar. Walaupun saya coba pakai PurgeCSS, namun kadang hasil tampilannya nggak maksimal, ada aja yang bermasalah.

Berikut adalah beberapa konsep dasar Tailwind CSS:

1. Utility-First Approach:

Tailwind CSS mengutamakan penggunaan kelas utilitas untuk mendefinisikan gaya elemen. Sebagai contoh, daripada memiliki CSS khusus untuk setiap elemen, Anda menggunakan kelas-kelas seperti bg-blue-400 untuk memberikan warna latar belakang biru.

2. Kelas-Kelas Dasar:

Tailwind menyediakan kelas-kelas untuk berbagai properti CSS, seperti warna, margin, padding, dan lainnya. Contohnya, text-red-400 akan memberikan warna teks merah.

3. Responsiveness:

Tailwind juga menyertakan kelas-kelas untuk menangani responsivitas. Misalnya, sm:text-lg akan memberikan ukuran teks besar pada tampilan layar kecil (small screens).

4. Responsiveness:

Kita dapat menyesuaikan konfigurasi Tailwind untuk memenuhi kebutuhan projek kita. Ini memungkinkan kita menambahkan, mengubah, atau menghapus kelas-kelas yang tersedia sesuai kebutuhan.

5. Penggunaan Variabel:

Tailwind menggunakan variabel untuk mengatur nilai-nilai tertentu, memudahkan penyesuaian. Misalnya, warna, ukuran font, atau nilai lain dapat diubah dengan mudah melalui variabel.

6. Pseudo-Classes dan Pseudo-Elements:

Tailwind mendukung penggunaan pseudo-classes dan pseudo-elements seperti hover , focus , dan before. Misalnya, hover:bg-yellow-500 memberikan latar belakang warna kuning ketika elemen dihover.

di bawah ini saya tampilkan contoh penggunaan kelas menggunakan framework lain dan dengan menggunakan Tailwind CSS dalam HTML :

Menggunakan framework lain :

Menggunakan framework TailwindCSS :

Nah! teman-teman udah tau kan perbedaannya, seperti yang sudah kita bahas sebelumnya, jika kita ingin membuat styling pada component, tidak perlu buat di file css terpisah, cukup buat styling di dalam halaman html/jsx saja, gimana ni sudah tertarik untuk menggunakan framework tailwindcss ? 👌