Menguak Rahasia Tailwind CSS: Pemahaman Dasar untuk Pemula

November 27, 2023

Menyambut Era Baru dengan Tailwind CSS

Seiring berkembangnya zaman, pengembangan web semakin dinamis, membutuhkan alat yang dapat mempercepat proses styling. Tailwind CSS, sebuah framework berbasis utility, telah menjadi jawaban bagi banyak pengembang yang ingin meningkatkan kecepatan dan fleksibilitas dalam desain UI mereka.

Jika Anda seperti saya, yang dulu setia pada Bootstrap, mungkin setelah mencicipi Tailwind, Anda akan merasakan pergeseran yang menggembirakan. 😄 Dalam tutorial ini, mari kita eksplorasi dasar-dasar Tailwind CSS, mulai dari pengertian dasarnya hingga cara menggunakannya.

Apa itu Tailwind CSS?

Tailwind CSS adalah framework CSS yang memanfaatkan konsep utility class untuk membangun antarmuka pengguna (UI) dalam aplikasi web. Uniknya, Tailwind terdiri dari 100% kelas utilitas, tanpa menyertakan komponen-komponen khusus seperti Navbar, Button, Card, dan lainnya. Sebagai gantinya, pengembang membuat komponen-komponen tersebut dengan menggabungkan berbagai kelas utilitas.

Contoh penggunaan kelas utilitas untuk membuat tombol:

Website Tailwind dan Sejarah Singkatnya

Meskipun pada awalnya mungkin terasa kompleks, Tailwind memberikan kebebasan kreatif yang luar biasa. Dikembangkan oleh Adam Wathan pada tahun 2017, Tailwind mencapai versi 1.0 pada tahun 2019, dan saat ini telah mencapai versi 3.2.4. Jika Anda tertarik melihat sejarah perubahan dari versi ke versi, Anda dapat merujuk ke CHANGELOG di Github.

Kenapa Memilih Tailwind CSS?

Sebagai seorang pengguna framework berbasis komponen seperti Bootstrap atau Bulma, mungkin Anda pernah merasa terbatas dalam kustomisasi. Dengan Tailwind, Anda akan merasakan kebebasan yang belum pernah terjadi sebelumnya. Mengapa?

Kustomisasi Tanpa Batas: Anda memiliki kontrol penuh terhadap desain tanpa perlu meng-overide class-class yang sudah ada.
Optimasi CSS yang Lebih Kecil: Hanya class-class yang digunakan yang akan ditambahkan ke hasil build CSS. Ini berarti output CSS Tailwind lebih kecil dibandingkan dengan beberapa framework lainnya.
Fleksibilitas yang Maksimal: Dengan Tailwind, Anda dapat membuat desain sesuai keinginan tanpa dibatasi oleh komponen-komponen bawaan. Anda yang memegang kendali sepenuhnya.

Persiapan Alat untuk Belajar Tailwind

Sebelum kita terjun ke dalam kode, pastikan kita sudah mempersiapkan alat yang diperlukan untuk coding Tailwind. Ada tiga alat yang harus Anda miliki:

Teks Editor: Gunakan teks editor pilihan Anda untuk menulis kode.
Web Browser: Peramban web untuk melihat hasil desain.
Node.js: Install Node.js untuk mengelola library dan paket yang diperlukan. Jika belum terinstal, ikuti langkah-langkah di Cara Install Node.js di Windows, Linux, dan Mac.

Untuk tutorial ini, saya akan menggunakan Visual Studio Code sebagai teks editor. Install ekstensi Tailwind IntelliSense untuk mempermudah penulisan kelas utilitas Tailwind.

Membuat Project Tailwind dengan NPM

Ada dua cara untuk menggunakan Tailwind dalam proyek:

Menggunakan Tailwind dari CDN: Tidak disarankan untuk produksi, tetapi cocok untuk belajar dan eksperimen.
Menggunakan NPM dari Node.js: Disarankan untuk proyek produksi karena memberikan hasil build CSS yang optimal.

Mari kita coba keduanya!

1. Menggunakan Tailwind dari CDN

Jika Anda hanya ingin mencoba-coba dan belajar Tailwind, CDN dapat digunakan. Tambahkan link CSS Tailwind dari CDN ke dalam tag <head> pada file HTML: