Dikutip dari beranda Tailwind CSS :
A utility-first CSS framework for rapidly building custom designs.
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Framework ini dibuat oleh Adam Wathan, dengan desain visual komponennya dibuat oleh Steve Schoger serta diluncurkan sekitar pertengahan 2020 lalu.
Tailwind css adalah css framework yang menawarkan konsep baru dengan konsep utility first di mana kita tidak perlu lagi memikirkan nama kelas untuk komponen HTMLnya. Tailwind terdiri dari nama kelas yang cukup intuitif untuk digunakan.
Tailwind cocok untuk membangun UI yang kompleks dan mempunyai ciri khas tersendiri.
Apa saja yang ditawarkan Tailwind CSS ?
● Lebih sederhana dibandingkan framework css lainnya
● Responsif
● Komponen friendly
● Didesain untuk disesuaikan
Beberapa kelebihan Tailwind CSS
● Lebih sederhana dan efisien
Tailwind menyediakan low-level utility classes yang dapat digunakan untuk membangun desain khusus secara keseluruhan, tanpa harus keluar dari file HTML.
● Responsif
Utilitas utilitas di Tailwind mempermudah untuk membuat tampilan antar muka yang responsif tanpa membutuhkan CSS khusus.
● Customizable
Tailwind menyediakan seluruh kombinasi kelas untuk semua ukuran layar.
Kekurangan Tailwind CSS
Meskipun memiliki banyak kelebihan, Tailwind juga memiliki beberapa kekurangan. Berikut ini adalah beberapa kekurangan framework ini.
● File Tailwind CSS cukup besar dibandingkan framework lainnya
Besarnya file Tailwind ini disebabkan oleh sekumpulan utility-classes.
● Belum ada komponen untuk form
Komponen untuk form ini berguna untuk pembuatan create,update,delete (CRUD). Untuk membuat aplikasi diperlukan kombinasi CSS dengan library lainnya.
● Nama kelas terlalu panjang
Contoh kelas di Tailwind
Install Tailwind via NPM
Generate package.json
Di terminal Anda, jalankan perintah berikut:
Perintah ini akan menghasilkan package.json di folder root kita, file ini memungkinkan kita untuk menginstal dependensi untuk proyek kita.
Pasang Tailwind CSS
Sekarang, kita perlu menginstal Tailwind CSS di proyek kita, jadi, kita akan menjalankan perintah ini:
Buat file tailwind.config.js
file tailwind.config.js memungkinkan kita menyesuaikan Tailwind CSS. Anda perlu menjalankan perintah berikut:
Kemudian, Tailwind CSS akan membuat tailwind.config.jsdi folder root kita.
Di dalam file ini kita memiliki sesuatu seperti ini:
Tambahkan Tailwind CSS ke CSS kita
Sekarang, kita perlu menambahkan beberapa baris kode di index.css file, jika Anda tidak memiliki file ini, Anda perlu membuat.
Buka file tersebut, dan masukkan kode berikut:
Menambahkan skrip dan menghasilkan Tailwind CSS Build
Sekarang, kita perlu membuat dan membuat skrip di package.jsonfile kita .
Dengan skrip ini kita dapat membuat build Tailwind CSS, satu-satunya hal yang perlu kita lakukan adalah menjalankan perintah berikut di terminal:
Skrip ini akan menghasilkan styles.css file di folder assets kita, file ini berisi semua kelas yang dibutuhkan Tailwind.
Menambahkan Style di HTML kita
Di dalam index.html, Anda perlu menambahkan file CSS build:
Anda dapat melihat dokumentasi Tailwind CSS untuk informasi lebih lanjut.
Contoh membuat form login menggunakan Tailwind
Kodenya seperti berikut ini :
Kesimpulan
Tailwind adalah framework CSS baru yang menyegarkan, pendekatan pertama membuat saya cepat mempelajarinya. Sintaks di Tailwind juga sangat konsisten, sehingga dengan sedikit pengalaman kita bisa mendesain proyek seperti yang kita inginkan. Tailwind tidak memiliki tampilan default, jadi kita benar-benar bebas mendesain seperti yang diinginkan.