Introduction

Tailwind CSS adalah framework CSS yang berbasis utility-first. Dibuat oleh Adam Wathan pada November 2017.

Fitur dan Kelebihan Tailwind CSS

• Utility First Merupakan pendekatan yang mengutamakan penggunaan kelas-kelas utilitas kecil untuk membangun desain antarmuka pengguna (UI) tanpa perlu menulis CSS khusus.

Contoh Utility Class:

• p-4: Memberikan padding sebesar 1 rem.
• text-center: Memusatkan teks.
• bg-blue-500: Memberikan warna latar belakang biru dengan tingkat kecerahan 500.
• mt-2: Memberikan margin atas sebesar 0.5 rem.

Contoh Penggunaan:

<div class="bg-blue-500 text-white font-bold p-4 rounded">
  Hello, Tailwind!
</div>

• Responsive Design Tailwind CSS memudahkan pembuatan desain responsif dengan menggunakan breakpoints yang sudah disediakan secara default. Dengan sistem ini, kamu bisa menerapkan gaya yang berbeda pada berbagai ukuran layar tanpa harus menulis media query secara manual. Tailwind menggunakan sistem mobile-first, artinya gaya yang kamu tentukan pertama kali akan berlaku pada layar kecil (mobile), dan gaya tambahan bisa diterapkan untuk layar yang lebih besar.

Berikut breakpoints default TailwindCSS:

• sm (Small): Layar dengan lebar minimum 640px.
• md (Medium): Layar dengan lebar minimum 768px.
• lg (Large): Layar dengan lebar minimum 1024px.
• xl (Extra Large): Layar dengan lebar minimum 1280px.
• 2xl (Extra Extra Large): Layar dengan lebar minimum 1536px.

Contoh Penggunaan:

<div class="bg-blue-500 text-white p-4 sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500 xl:bg-purple-500">
  Responsive Box
</div>

• Dark Mode and Variants Tailwind CSS mendukung Dark Mode secara bawaan dan menyediakan cara yang fleksibel untuk mengubah gaya antarmuka sesuai dengan preferensi pengguna. Tailwind juga memungkinkan kamu untuk menggunakan variants untuk menerapkan gaya yang berbeda berdasarkan interaksi pengguna, seperti hover, focus, atau active.

Contoh Penggunaan Dark Mode:

<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-4">
  This is responsive to dark mode!
</div>

Contoh Penggunaan Variants:

<button class="bg-blue-500 text-white p-4 hover:bg-blue-700 focus:ring-4 active:bg-blue-800">
  Hover, Focus, and Active States
</button>

Kekurangan Tailwind CSS

Meskipun Tailwind CSS sangat populer karena kecepatan dan efisiensinya dalam membangun antarmuka, ada beberapa alasan mengapa sebagian orang menganggap bahwa Tailwind CSS mungkin tidak ramah bagi pemula dan membuat kode terlihat kurang rapi.

Tailwind CSS menggunakan pendekatan utility-first, di mana kamu menulis kode HTML dengan menumpuk kelas utilitas yang spesifik untuk setiap properti CSS. Bagi pemula, ini bisa tampak berantakan dan membingungkan, karena satu elemen HTML bisa memiliki banyak sekali kelas.