Apa Itu Tailwind CSS? Panduan Sederhana untuk App Builder

Tailwind CSS adalah toolkit untuk menata tampilan situs web. Alih-alih menulis aturan style terpisah di file sendiri, Anda memberi setiap elemen nama class pendek yang sudah siap pakai — bg-white untuk latar putih, p-4 untuk padding, text-lg untuk teks yang lebih besar, rounded-xl untuk sudut membulat — dan Tailwind menghasilkan CSS yang dibutuhkan browser. Toolkit ini gratis, open source, dan salah satu cara paling umum untuk menata aplikasi web modern.

Mengapa Tailwind penting saat membangun dengan AI

Jika Anda membangun aplikasi web dengan AI app builder, kemungkinan besar aplikasi Anda ditata dengan Tailwind. Mythex, misalnya, memulai proyek baru dengan Vite + React + TypeScript + Tailwind kecuali Anda meminta yang lain (cara teknologinya dipilih).

Itu berarti tiga hal bagi Anda:

• Perubahan desain jadi murah. Karena styling berada tepat di sebelah setiap tombol, kartu, dan judul, AI bisa menjalankan permintaan seperti "buat kartunya tidak terlalu padat" dengan mengedit beberapa class di satu tempat.
• Anda bisa membacanya. Class Tailwind mirip bahasa Inggris biasa. text-center font-bold text-2xl tidak sulit dipahami, bahkan jika Anda belum pernah menulis kode.
• Tampilannya tetap konsisten. Tailwind menyediakan skala ukuran, spasi, dan warna yang tetap. Itu mencegah aplikasi punya 14 jenis abu-abu yang sedikit berbeda.

Analogi sehari-hari

Bayangkan cat dan merenovasi rumah.

CSS biasa seperti mencampur cat sendiri untuk setiap dinding. Kebebasannya penuh, tetapi lama-kelamaan ruang tamu berwarna "putih hangat", lorong berwarna "putih yang sedikit lebih hangat", dan tidak ada yang ingat alasannya.

Tailwind seperti kartu warna dari toko cat ditambah stiker berlabel. Setiap dinding diberi stiker — "putih, doff, 2 lapis" — dan kartu warnanya hanya menyediakan sejumlah nuansa yang sudah dikurasi. Anda kehilangan sedikit kebebasan, tetapi semua orang di proyek tahu persis seperti apa setiap dinding hanya dengan membaca stikernya.

Cara kerja Tailwind

Halaman web dibangun dari HTML (isi dan struktur) dan CSS (tampilan). Biasanya, CSS berada di file terpisah dengan aturan seperti ini:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Dengan Tailwind, Anda tidak perlu menulis aturan itu. Anda langsung memasang utility class pada elemen:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Pemesanan Anda sudah dikonfirmasi
</div>

Setiap class melakukan satu tugas kecil. Saat aplikasi dibangun, Tailwind memindai file Anda, menemukan class yang benar-benar dipakai, lalu hanya membuat CSS untuk class tersebut. Itu membuat stylesheet akhir tetap kecil.

Tailwind versi 4, versi mayor terbaru, bisa disiapkan dengan konfigurasi yang sangat sedikit: Anda memasangnya, menambahkan plugin-nya ke build tool, dan menulis @import "tailwindcss"; di bagian atas file CSS. Kustomisasi seperti warna merek dan font didefinisikan di CSS sebagai design token, bukan di file konfigurasi JavaScript yang besar seperti pada versi lama. Jika Anda membaca tutorial lama yang menyebut tailwind.config.js, itulah alasannya.

Contoh kerja: kartu harga

Misalkan Anda meminta AI builder untuk membuat halaman harga dan ingin kartu "Pro" menonjol. Kode kartunya mungkin seperti ini (di komponen React, class ditulis sebagai className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Mulai uji coba
  </button>
</div>

Membacanya dari kiri ke kanan:

Jika Anda meminta "buat kartu Pro menonjol dengan garis tepi biru dan bayangan halus", AI mungkin mengubah border-gray-200 menjadi border-2 border-blue-600 dan menambahkan shadow-lg. Itu saja perubahannya.

Responsif dan mode gelap

Tailwind punya awalan (prefix) pendek untuk ukuran layar dan kondisi tertentu:

• md:grid-cols-3 — tiga kolom pada layar menengah ke atas; di ponsel, kolom tunggal default yang berlaku. Tailwind bersifat mobile-first: class tanpa awalan berlaku di mana saja, dan awalan menambahkan perubahan untuk layar yang lebih besar.
• hover:bg-gray-700 — tombol menjadi lebih gelap saat kursor berada di atasnya.
• dark:bg-gray-900 — latar belakang berbeda ketika mode gelap aktif.

Itulah sebabnya meminta tata letak yang responsif di ponsel atau mode gelap biasanya cepat dilakukan di proyek Tailwind.

Istilah kunci

Kesalahpahaman umum

• "Tailwind adalah sebuah desain." Bukan. Tailwind memberi Anda blok bangunan, bukan tampilan. Dua situs Tailwind bisa terlihat sangat berbeda. Tampilan "aplikasi AI" yang generik datang dari default, bukan dari Tailwind itu sendiri — berikan AI builder Anda arahan yang nyata. Lihat cara mendesain aplikasi yang bagus dengan AI.
• "Sama saja dengan inline style." Tidak juga. Class berasal dari skala yang sama, mendukung hover, mode gelap, dan breakpoint, dan diubah menjadi CSS biasa saat build.
• "Tailwind membuat halaman berat." Build hanya menyertakan class yang Anda pakai, jadi CSS yang dikirim ke pengunjung biasanya kecil.
• "Daftar class yang panjang berarti kode berantakan." Di awal memang terlihat sibuk, tetapi semua hal tentang tampilan sebuah elemen ada di satu tempat. Pola yang berulang biasanya dikumpulkan menjadi komponen, misalnya satu komponen Button.
• "Jika memakai Tailwind, saya tidak bisa memakai CSS kustom." Anda tetap bisa menulis CSS biasa kapan pun dibutuhkan.

Yang sebaiknya diminta ke AI builder Anda

• "Tentukan warna dan font merek kami sekali saja sebagai theme token, lalu pakai di mana-mana, bukan warna yang ditulis langsung di kode."
• "Buat setiap kartu, tombol, dan input memakai sudut membulat dan spasi yang sama."
• "Periksa tata letak pada lebar ponsel dan perbaiki bagian yang meluap atau terlalu kecil untuk diketuk."
• "Tambahkan mode gelap dengan variant dark: dari Tailwind dan pastikan kontras teks tetap mudah dibaca."
• "Pindahkan gaya tombol yang berulang ke satu komponen Button yang bisa dipakai ulang."
• "Jelaskan class Tailwind di bagian ini dengan bahasa sederhana."

Tailwind di Mythex

Proyek baru di Mythex memakai Tailwind secara default bersama React dan TypeScript, sehingga Anda bisa meminta perubahan visual dengan kata-kata biasa dan langsung melihatnya di Preview live. Jika Anda ingin melihat kodenya, editor kode menampilkan setiap class (hanya-baca di Free, bisa diedit di Pro). Jika Anda lebih suka CSS biasa atau setup yang berbeda, katakan di prompt pertama Anda — dokumentasi menjelaskan cara stack dipilih.

Pertanyaan