Menggunakan Tailwind CSS

Tailwind CSS adalah framework CSS berbasis utility-first yang memungkinkan pengembang membuat desain antarmuka dengan cepat tanpa perlu menulis banyak kode CSS kustom.

1. Instalasi Tailwind CSS

Ada beberapa cara untuk menggunakan Tailwind CSS, yaitu:

• Menggunakan CDN (cocok untuk proyek kecil):

  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
  

• Instalasi via npm (cocok untuk proyek besar):

  npm install -D tailwindcss postcss autoprefixer  
  npx tailwindcss init  
  

  Setelah instalasi, tambahkan Tailwind ke dalam file CSS utama:

  @tailwind base;  
  @tailwind components;  
  @tailwind utilities;  
  

2. Konsep Utility-First

Tailwind menyediakan kelas-kelas kecil (utility classes) yang langsung bisa digunakan tanpa menulis CSS kustom. Contoh:

• Mengubah warna teks dan background:

  <p class="text-blue-500 bg-gray-200">Ini teks berwarna biru</p>
  

• Mengatur ukuran font dan padding:

  <h1 class="text-3xl font-bold p-4">Judul Besar</h1>
  

• Flexbox dan Grid dengan mudah:

  <div class="flex justify-center items-center h-screen">
    <p class="text-lg">Tengah secara otomatis</p>
  </div>
  

3. Kustomisasi Tailwind CSS

Tailwind bisa dikustomisasi melalui file tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',  
      },
    },
  },
}

Tambahkan warna primary ke elemen HTML:

<button class="bg-primary text-white p-2 rounded">Tombol</button>

4. Mengoptimalkan Tailwind (PurgeCSS)

Untuk mengurangi ukuran file CSS di produksi, gunakan PurgeCSS:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js'],
}

Ini akan menghapus kelas yang tidak digunakan, sehingga CSS lebih ringan.

Dengan Tailwind CSS, pengembangan UI menjadi lebih cepat dan lebih rapi tanpa harus menulis banyak CSS kustom.