Pengantar
Banyak pilihan framework JavaScript yang dapat membantu pengembangan front-end, namun, di sisi lain pilihan untuk framework CSS agaknya itu-itu saja. Selama satu dekade terakhir, Bootstrap menjadi solusi terpadu yang sering digunakan untuk membangun antarmuka web, bareng dengan beberapa alternatifnya seperti Foundation atau Bulma. Tetap saja, Bootstrap menjadi pilihan utama, kecuali kita menginginkan warna bawaan hijau, kita dapat memilih Bulma.
Kelengkapan desain komponen, tentu, membuat pengembang memilih Bootstrap. Namun, alasan yang sama justru membuat antarmuka web yang dibangun dengan Bootstrap cenderung mirip. Masalah ini, sebetulnya, dapat diatasi dengan membuat antarmuka kustom yang unik. Bootstrap pun memungkinkan kita sebagai pengembang melakukan hal tersebut melalui fitur customization-nya. Namun, saat kita merancang antarmuka web yang unik, seringkali kita memiliki komponen-komponen yang tidak dimiliki Bootstrap secara bawaan dan desain komponen bawaan Bootstrap pun memiliki gaya yang berbeda. Kedua hal tersebut, seringkali, seolah menjadi sawar bagi pengembang saat menggunakan framework UI kit.
Menyesuaikan desain komponen-komponen bawaan framework seringkali membutuhkan waktu lebih banyak dibanding merancang komponen dari awal sesuai desain yang sudah ada. Ini dikarenakan kita harus memahami struktur konfigurasi framework tersebut dan mengatur ulang gaya-gaya tiap komponen. Sedangkan di sisi lain, merancang komponen dari awal biasanya membutuhkan waktu lebih sedikit. Sebab kita tidak memerlukan waktu untuk mengatur ulang komponen apapun -- semuanya dibuat dari awal.
Merancang antarmuka komponen dari awal, tidak berarti menulis kode CSS dari awal. Di sinilah framework seperti Tailwind CSS datang menyelamatkan. Alih-alih menawarkan pra-desain komponen, Tailwind datang menawarkan desain sistem melalui konsep yang bernawa utility first. Untuk merancang sebuah komponen dengan Tailwind, kita hanya perlu menggabungkan beberapa class-class kecil hingga menciptakan sebuah visual yang kita inginkan. Dengan demikian, tidak ada waktu yang dibutuhkan untuk mengatur ulang desain komponen apapun dan setiap komponen yang diciptakan dengan Tailwind akan memiliki visual yang konsisten.
Pada materi belajar ini, kita akan mempelejari bagian-bagian dari Tailwind yang penting untuk dikuasai agar dapat menggunakannya dalam kebutuhan pengembangan sehari-hari, mulai dari memahami konsep utility-first hingga menyesuaikan desain sistem melalui struktur konfigurasi.
Selama belajar!