Front-end: Tailwind CSS

 

Tailwind CSS merupakan "a utility-first CSS framework for rapid UI development", yang mana framework CSS ini sangat berbeda dari lainnya yang sudah populer terlebih dahulu yaitu Bootstrap, Bulma maupun Foundation.

Tailwind CSS pertama kali dirilis pada tahun 2017 versi 0.1.0 alpha oleh Adam Wathan, Jonathan Reinink, David Hemphill, dan Steve Schoger. Dan sampai sekarang masih dikembangkan bersama kontributor-kontributornya diseluruh dunia di platform kolaborasi yaitu Github.

Apa itu utility-first CSS?

Utility berarti kegunaan dalam bahasa Indonesia, yang dimaksud disini adalah pendekatan yang dipakai untuk memberikan nama semua class sesuai dengan fungsi/kegunaan yaitu "atribut dan nilai" dari CSS yang dideklarasikan.

contoh: 

.font-bold {
    font-weight: bold;
}


Beberapa fitur unggulan Tailwind CSS

  • Utility-first class
  • Tiny in production, secara otomatis menghapus semua CSS yang digunakan saat melakukan build di production.
  • Mobile-first.
  • Responsive.
  • Dark Mode.

Perbedaan Tailwind CSS dengan framework CSS lain?

Untuk melihat apa perbedaannya mari kita bandingkan dengan salah satu framework CSS. Kali ini kita bandingkan dengan Bootstrap.

Bootstrap
Tailwind CSS


Dari contoh diatas, kita bisa lihat perbedaan yang sangat jelas dari penamaan kelas pada Bootstrap dan Tailwind CSS, yaitu yang sudah kita ketahui sebelumnya bahwa Tailwind CSS menggunakan pendekatan utility-first sedangkan Bootstrap menggukan nama objeknya, yang mana jika kita ingin memodifikasi style .btn-primary tentu kita harus melakukan overriding, tetapi di versi terbarunya Bootstrap sudah mulai mengadaptasi pendekatan utility-first pada beberapa class tertentu.


Kesimpulan

Tailwind CSS adalah terobosan yang sangat bagus untuk web development di masa sekarang, karena sebelum rilisnya Tailwind CSS web developer masih bergantung pada CSS metodologi, dengan adanya Tailwind CSS, kita tidak bergantung pada CSS metodologi apapun. Kita bisa membuat style apapun tanpa overriding, yang mana overriding ini juga akan menambah style baru yang membuat kapasitas file CSS makin bertambah.


Sekian ulasan tentang Tailwind CSS, untuk selengkapnya silahkan pelajari di https://tailwindcss.com/




source: