Halo teman-teman semuanya, setelah sebelumnya kita mempelajari dasar-dasar CSS, sekarang saatnya kita berkenalan dengan Tailwind CSS, sebuah framework CSS modern yang sangat populer karena pendekatannya yang unik dan efisien.
Dengan memahami Tailwind CSS, kita bisa membangun antarmuka yang cantik dan responsif hanya dengan menambahkan class-class langsung pada elemen HTML, tanpa perlu menulis CSS secara manual.
Apa Itu Tailwind CSS?
Tailwind CSS adalah sebuah utility-first CSS framework, artinya ia menyediakan banyak sekali utility class siap pakai yang bisa langsung digunakan untuk mengatur layout, spacing, warna, tipografi, dan lainnya.
Contohnya:
<p class="text-blue-500 text-lg font-bold">Ini paragraf dengan teks biru, ukuran besar, dan tebal</p>
Tanpa menulis satu baris pun kode CSS, kita sudah bisa membuat tampilan teks sesuai keinginan hanya dengan menambahkan class dari Tailwind.
Kenapa Menggunakan Tailwind CSS?
Beberapa alasan kenapa banyak developer menyukai Tailwind CSS:
- Cepat dan fleksibel: Cukup dengan menambahkan class di HTML.
- Tanpa custom CSS: Tidak perlu bikin class baru untuk setiap style.
- Responsive-ready: Mendukung breakpoint secara langsung.
- Produktivitas meningkat: Karena kita bekerja langsung di HTML.
Cara Instalasi Tailwind CSS
Ada beberapa cara menggunakan Tailwind CSS. Di artikel ini kita fokus pada dua cara utama:
-
Menggunakan CDN
Ini adalah cara paling sederhana. Cukup tambahkan link CDN Tailwind di dalam tag <head> HTML kita.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-2xl text-green-600 font-semibold">Hello Tailwind!</h1>
</body>
</html>
Dengan ini kita bisa langsung menggunakan semua class Tailwind tanpa setup tambahan.
-
Menggunakan Tailwind CLI
Untuk proyek riil, sebaiknya kita instal Tailwind secara lokal agar lebih fleksibel dan bisa dikustomisasi. Ikuti langkah-langkah berikut:
-
Langkah 1: Buat folder proyek
mkdir proyek-tailwind
cd proyek-tailwind
-
Langkah 2: Inisialisasi package.json
npm init -y
-
Langkah 3: Instal Tailwind CSS
npm install tailwindcss @tailwindcss/cli
-
Langkah 4: Buat struktur folder dan file Tailwind
mkdir src
touch src/input.css
touch index.html
Isi src/input.css dengan:
@import "tailwindcss";
-
Langkah 5: Jalankan build Tailwind
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
-
Langkah 6: Hubungkan file output.css ke HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./output.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Kesimpulan:
- Tailwind CSS adalah framework CSS berbasis utility-class.
- Kita bisa menggunakannya dengan mudah dan efisien untuk membangun antarmuka modern.
- Tersedia dua cara instalasi: melalui CDN (untuk belajar) atau melalui Tailwind CLI (untuk proyek besar).
Di artikel selanjutnya, kita akan belajar tentang struktur utility class di Tailwind CSS — bagaimana class-class seperti text-center, p-4, bg-blue-500 dan lainnya bekerja.
Terima kasih