Dasar Tailwind CSS: Class Inti yang Paling Sering Dipakai Developer

Admin 16 November 2025

posts/EIkif14Nr9B4jHzwBFrAFJowTGGUjPrsvdyTHO2g.png

Tailwind CSS adalah framework CSS yang revolusioner karena berfokus pada utilitas (utility-first). Daripada menulis CSS tradisional, developer langsung menerapkan class-class siap pakai di markup HTML. Menguasai beberapa class inti adalah kunci untuk mempercepat alur kerja frontend Anda.

Layout dan Fleksibilitas (Flexbox dan Grid)

Untuk mengatur tata letak elemen, Anda akan sering menggunakan Flexbox dan Grid. Gunakan class flex untuk mengubah elemen menjadi wadah Flexbox. Anda dapat mengatur arah item anak dengan flex-row (horizontal) atau flex-col (vertikal). Untuk perataan, gunakan justify-center untuk memposisikan item di tengah sumbu utama, dan items-center untuk sumbu silang.

Untuk tata letak yang lebih kompleks, gunakan grid. Tentukan jumlah kolom dengan grid-cols-3 untuk membuat tiga kolom yang sama lebar. Anda dapat mengontrol jarak antar sel grid dengan gap-4.

<div class="flex justify-between items-center">
  </div>

<div class="grid grid-cols-4 gap-6">
  </div>

Spacing (Padding dan Margin)

Pengaturan jarak atau spacing adalah fundamental. Tailwind menggunakan skala spasi yang konsisten (misalnya, 1 unit = 4px).

Padding (p-) digunakan untuk jarak di dalam elemen, sedangkan Margin (m-) untuk jarak di luar elemen. Anda bisa menargetkan sisi tertentu: pt-4 (padding atas), mb-8 (margin bawah), atau sumbu: px-6 (padding horizontal), my-2 (margin vertikal).

<div class="p-4 mt-8 bg-gray-100">
  Konten dengan padding 4 dan margin-top 8.
</div>

Typography (Tipografi)

Class tipografi mengatur tampilan teks. Gunakan text-xl untuk mengubah ukuran font menjadi extra-large. Bobot font dikontrol oleh font-bold atau font-light. Warna teks diatur menggunakan text-blue-600. Perataan teks diatur dengan text-center atau text-left.

<h1 class="text-3xl font-bold text-gray-800 text-center">
  Judul Utama Artikel
</h1>

Warna dan Latar Belakang

Tailwind menyediakan palet warna yang luas, diberi nama dengan intensitas (dari 50 hingga 900). Gunakan prefix bg- untuk warna latar belakang dan text- untuk warna font. Contohnya, bg-red-500 memberikan latar belakang merah dengan intensitas 500, dan text-white memberikan teks putih.

<button class="bg-indigo-600 text-white p-3 rounded-lg">
  Tombol Aksi
</button>

Border, Radius, dan Bayangan

Untuk memberikan batas, gunakan class border. Anda dapat menentukan ketebalan dengan border-2. Untuk sudut membulat, gunakan rounded-lg atau rounded-full. Efek bayangan, seperti pada card, diatur dengan shadow-md atau shadow-xl.

<div class="border border-gray-300 rounded-xl shadow-lg p-6">
  Ini adalah sebuah Card.
</div>

Responsive Utilities

Tailwind memudahkan responsive design melalui prefix breakpoint. Prefix ini hanya berlaku pada ukuran layar yang ditentukan dan yang lebih besar.

sm: (layar kecil, $\ge$ 640px)
md: (layar menengah, $\ge$ 768px)
lg: (layar besar, $\ge$ 1024px)

Anda dapat mengombinasikannya, misalnya, md:grid-cols-2 berarti tata letak grid dua kolom hanya akan berlaku pada perangkat tablet dan desktop, sementara perangkat mobile akan menggunakan kolom default.

<div class="text-center md:text-left lg:text-right">
  Teks ini memiliki perataan berbeda di setiap ukuran layar.
</div>

Efek Interaksi (Hover dan Transisi)

Untuk membuat elemen interaktif, gunakan pseudo-class prefix seperti hover: dan focus:. Kombinasikan dengan class transisi untuk membuat perubahan yang mulus.

Class transition mengaktifkan transisi. duration-300 mengatur durasi animasi menjadi 300ms.

<a href="#" class="bg-yellow-400 p-2 transition duration-300 hover:bg-yellow-500">
  Tautan dengan Efek Hover Halus
</a>

Menguasai class inti ini memungkinkan Anda untuk membangun antarmuka modern yang cepat dan responsive tanpa perlu menulis CSS kustom yang berlebihan.

0 0