Cara Mudah Setup Tailwind CSS di React menggunakan Vite

Halo teman-teman 👋
Kalau ngomongin dunia frontend, pasti sering dengar nama Tailwind CSS. Framework ini memang lagi hype banget sejak pertama kali dirilis tahun 2019.

Kalau biasanya kita pakai Bootstrap yang kasih komponen siap pakai kayak button atau card, Tailwind beda. Dia kasih utility class kecil-kecil yang bisa kita kombinasikan sendiri. Jadi desain lebih fleksibel dan kita bisa ngoding lebih cepat tanpa ribet nulis CSS panjang.

Tapi sebelum nyemplung ke Tailwind, pastikan dulu kamu ngerti dasar HTML dan CSS. Soalnya Tailwind itu bukan pengganti CSS, tapi alat buat bikin styling jadi jauh lebih gampang.

Keuntungan Menggunakan TaiwindCSS

Kenapa banyak perusahaan dan developer memilih Tailwind CSS? Berikut empat alasan utamanya:

1. Efisiensi
   
   Dengan Tailwind, developer bisa bikin desain lebih cepat tanpa harus nulis CSS manual. Hasilnya? Waktu kerja jauh lebih hemat..
   
   
2. Penyesuaian
   
   Tailwind punya banyak class bawaan untuk menyesuaikan desain sesuai kebutuhan. Kalau masih kurang, developer juga bisa bikin aturan sendiri. Jadi fleksibel tanpa batasan.
   
   
3. Performa
   
   Tailwind otomatis membuang CSS yang tidak terpakai (code elimination). Alhasil, file CSS jadi lebih ringan dan website lebih cepat di-load di browser.
   
   
4. Komunitas
   
   Komunitas Tailwind sangat aktif. Mereka rutin berbagi plugin, contoh, dan update. Itu artinya framework ini selalu berkembang dan terjaga kualitasnya.
   
   

Setup Tailwind CSS di Vite + React

1. Instal Node.js

Langkah pertama, pastikan Node.js sudah terpasang di komputer. Jika belum, unduh gratis di nodejs.org dan ikuti proses instalasinya.

Untuk mengecek, buka terminal lalu ketik:

Jika muncul nomor versi, berarti Node.js sudah terinstal. Kalau tidak ada output, artinya Node.js belum terpasang.

2. Membuat Project React dengan Vite

Setelah Node.js siap, buka terminal dan pindah ke folder tempat project akan dibuat. Misalnya:

Kemudian jalankan perintah:

npm create vite@latest wpdev-tailwindcss -- --template react

Ganti wpdev-tailwindcss dengan nama project sesuai keinginan.

Masuk ke folder project:

cd wpdev-tailwindcss

Lalu install dependency awal:

npm install

3. Install Tailwind CSS

Di dalam folder project, jalankan:

npm install -D tailwindcss postcss autoprefixer

(Tidak perlu lagi postcss dan autoprefixer di Tailwind v4, karena sudah built-in).

4. Konfigurasi File CSS

Buka file src/index.css.

Hapus semua isinya, lalu ganti dengan:

@import tailwindcss;

Simpan perubahan.

5. Jalankan Project

Sekarang jalankan server dengan:

npm run dev

Vite akan menampilkan link, biasanya:

Tekan Ctrl + klik pada link tersebut untuk membuka project di browser. Jika berhasil, project React + Tailwind sudah siap digunakan.

Kesimpulan

Dalam artikel ini, kita sudah:

1. Menginstal Node.js.
2. Membuat project React menggunakan Vite.
3. Menginstal dan menghubungkan Tailwind CSS.
4. Menjalankan project di browser.

Dengan setup ini, kita sudah siap membuat website modern dengan React dan Tailwind CSS. Pada artikel selanjutnya, kita akan membahas class penting di Tailwind serta cara menyesuaikan desain sesuai kebutuhan.

Terima kasih sudah membaca 🙏