Tailwind CSS telah menjadi framework CSS paling populer di dunia developer web. Versi 4.0 yang rilis membawa perubahan signifikan dengan performa lebih cepat, CSS-first configuration, dan fitur-fitur baru yang memudahkan styling.
Apa itu Tailwind CSS?
Tailwind CSS adalah framework CSS utility-first yang memungkinkan Anda membangun desain kustom dengan menggabungkan class-class utility. Berbeda dengan framework seperti Bootstrap yang menyediakan komponen siap pakai, Tailwind memberi Anda blok bangunan dasar untuk menciptakan desain unik.
Fitur Baru di Tailwind CSS 4.0
- CSS-first Configuration — Konfigurasi langsung via CSS, tanpa file config.js
- Performance Boost — Build time 40% lebih cepat berkat engine baru
- Native CSS Nesting — Dukungan penuh untuk CSS nesting
- Container Queries — Styling berdasarkan ukuran container, bukan viewport
- @import Support — Impor CSS file langsung via @import
- Improved Dark Mode — Dark mode generasi baru dengan @variant
Instalasi Tailwind CSS 4.0
# Via npm (recommended)
npm install tailwindcss@latest
# File CSS utama (app.css)
@import "tailwindcss";
# Build
npx @tailwindcss/cli -i app.css -o style.css
Tidak perlu lagi tailwind.config.js — semua konfigurasi dilakukan langsung di CSS!
CSS-first Configuration
Di Tailwind 4.0, konfigurasi dilakukan langsung di file CSS menggunakan @theme directive:
@import "tailwindcss";
@theme {
--color-primary: #2563eb;
--color-secondary: #7c3aed;
--font-display: "Inter", sans-serif;
--breakpoint-xs: 30rem;
}
/* Custom utility */
@utility text-balance {
text-wrap: balance;
}
Contoh Layout dengan Tailwind 4.0
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
<div class="bg-white rounded-xl shadow-md p-6
hover:shadow-lg transition-shadow">
<h3 class="text-lg font-semibold text-gray-800">
Card Title
</h3>
<p class="mt-2 text-gray-600 text-balance">
Ini adalah contoh card dengan Tailwind CSS 4.0.
Menggunakan fitur container queries dan text-balance.
</p>
</div>
</div>
Container Queries
Fitur baru yang memungkinkan styling berdasarkan ukuran elemen container:
@container style(max-width: 400px) {
.card {
display: flex;
flex-direction: column;
}
}
/* Di HTML */
<div class="@container">
<div class="grid grid-cols-1 @md:grid-cols-2 gap-4">
...
</div>
</div>
Dark Mode dengan @variant
<div class="bg-white dark:bg-gray-800
text-gray-900 dark:text-gray-100
@dark:border-gray-700">
Konten dengan dark mode support
</div>
Troubleshooting
1. Custom color tidak muncul
Sebab: Menggunakan format konfigurasi lama (JavaScript).
Solusi: Migrasi dari tailwind.config.js ke @theme directive di CSS. Semua kustomisasi harus didefinisikan di CSS.
2. Build error "Unknown utility"
Sebab: Utility menggunakan nilai yang tidak terdefinisi di theme.
Solusi: Pastikan nilai kustom didefinisikan di @theme block. Contoh: jika menggunakan text-primary, pastikan --color-primary ada di @theme.
Baca Juga
Kesimpulan
Tailwind CSS 4.0 membawa angin segar dengan pendekatan CSS-first yang lebih natural. Performa build yang lebih cepat, konfigurasi yang lebih sederhana, dan fitur modern seperti container queries membuat Tailwind tetap menjadi pilihan utama untuk pengembangan web di 2026.
