Pengenalan HTML 15
Sekilas tentang Tailwind CSS

oleh: Suryo Adhy Chandra, ST

Kita sudah belajar CSS sendiri dan Bootstrap. Sekarang ada satu lagi framework CSS yang sangat populer di dunia web modern — namanya Tailwind CSS. Yuk kita kenali!

1. Apa itu Tailwind CSS?

Tailwind CSS adalah framework CSS yang bekerja dengan cara yang berbeda dari Bootstrap. Tailwind menyediakan banyak utility class kecil-kecil yang masing-masing hanya mengatur satu hal saja.

Misalnya, daripada menulis class .btn-primary yang sudah mengatur warna, padding, border-radius sekaligus, di Tailwind kita menggabungkan class-class kecil satu per satu:

<!-- Tailwind: setiap class hanya mengatur satu hal --> <button class="bg-blue-500 text-white px-4 py-2 rounded-lg"> Tombol </button> <!-- Artinya: --> <!-- bg-blue-500 = background biru (tone 500) --> <!-- text-white = teks putih --> <!-- px-4 = padding kiri-kanan 16px --> <!-- py-2 = padding atas-bawah 8px --> <!-- rounded-lg = border-radius besar -->

Cara ini disebut utility-first — membangun tampilan dengan menggabungkan banyak class kecil langsung di HTML, tanpa perlu menulis file CSS terpisah.

2. Perbedaan Tailwind dengan Bootstrap 5

Aspek Tailwind CSS Bootstrap 5
Pendekatan Utility-first — class kecil untuk satu fungsi Component-based — class untuk satu komponen utuh
Tampilan default Tidak ada — kamu yang menentukan segalanya Ada tampilan bawaan yang langsung bisa dipakai
Kustomisasi Sangat bebas dan mudah dikustomisasi Bisa, tapi butuh usaha lebih untuk mengubah default
Kecepatan belajar Butuh waktu lebih untuk hafal nama class-nya Lebih mudah dipelajari untuk pemula
Ukuran file Sangat kecil (hanya class yang dipakai yang disertakan) Lebih besar karena menyertakan semua komponen
Desain unik Mudah — tidak ada tampilan "Bootstrap-feel" Semua website Bootstrap cenderung mirip satu sama lain
Popularitas 2024 Sangat populer di project modern Masih banyak digunakan, terutama di proyek lama

Contoh membuat tombol yang sama dengan dua cara:

Bootstrap

<button class="btn btn-primary"> Tombol </button>

Tailwind

<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg"> Tombol </button>

(preview tanpa Tailwind — hasilnya sama)

3. Contoh Tailwind Sederhana

Untuk menggunakan Tailwind, kita perlu menyertakan script CDN-nya terlebih dahulu di bagian <head>:

<script src="https://cdn.tailwindcss.com"></script>

Contoh 1 — Teks dan warna:

<!-- Tailwind --> <p class="text-2xl font-bold text-blue-800">Judul Besar Biru</p> <p class="text-base text-gray-600">Teks normal abu-abu</p> <p class="text-sm italic text-green-600">Teks kecil hijau miring</p>

Judul Besar Biru

Teks normal abu-abu

Teks kecil hijau miring

Contoh 2 — Kartu dengan shadow:

<div class="bg-white border border-gray-200 rounded-xl p-5 shadow-md"> <h3 class="text-lg font-bold text-blue-900 mb-1">Judul Kartu</h3> <p class="text-gray-500 text-sm">Isi kartu yang dibuat dengan Tailwind CSS.</p> <button class="mt-3 bg-blue-500 text-white text-sm px-4 py-2 rounded-lg"> Selengkapnya </button> </div>

Judul Kartu

Isi kartu yang dibuat dengan Tailwind CSS.

Contoh 3 — Layout dua kolom:

<div class="flex gap-4"> <div class="bg-blue-100 border border-blue-300 rounded-lg p-4 flex-1"> Kolom Kiri </div> <div class="bg-green-100 border border-green-300 rounded-lg p-4 flex-1"> Kolom Kanan </div> </div>
Kolom Kiri
Kolom Kanan

Contoh 4 — Kode lengkap pakai CDN:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar Tailwind</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-100 p-8"> <h1 class="text-3xl font-bold text-blue-900 mb-4">Blog Saya</h1> <div class="bg-white rounded-xl shadow-md p-5 mb-4"> <h2 class="text-xl font-semibold text-blue-800 mb-1">Artikel Pertama</h2> <p class="text-gray-600 text-sm mb-3">7 April 2025 | Admin</p> <p class="text-gray-700">Ini adalah isi artikel pertama yang dibuat dengan Tailwind.</p> <button class="mt-3 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm"> Baca Selengkapnya </button> </div> <div class="bg-white rounded-xl shadow-md p-5"> <h2 class="text-xl font-semibold text-blue-800 mb-1">Artikel Kedua</h2> <p class="text-gray-600 text-sm mb-3">8 April 2025 | Admin</p> <p class="text-gray-700">Ini adalah isi artikel kedua yang dibuat dengan Tailwind.</p> <button class="mt-3 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm"> Baca Selengkapnya </button> </div> </body> </html>
Ringkasan:
  • Tailwind CSS = framework utility-first, class kecil-kecil untuk satu fungsi
  • Bootstrap = framework component-based, class untuk komponen utuh
  • Tailwind lebih bebas dan fleksibel, Bootstrap lebih cepat untuk pemula
  • Pakai CDN https://cdn.tailwindcss.com untuk langsung mencoba
  • Nama class Tailwind mengikuti sistem tone 50–900 seperti yang kita pelajari di materi warna
← Kembali Ke Daftar Pelajaran HTML