Adifahram

Kategori: Laravel

Materi Dasar Tailwind CSS

Dipublikasikan pada 2025-05-17 10:22:26

Gambar

Materi Dasar Tailwind CSS: Membuat Halaman Blog

1. Apa Itu Tailwind CSS?

Tailwind CSS adalah framework CSS berbasis utility-first yang memungkinkan kita membuat desain web dengan cepat menggunakan class bawaan. Berbeda dengan Bootstrap yang memiliki komponen siap pakai, Tailwind memberikan fleksibilitas lebih dengan utility class untuk styling.

2. Mengapa Menggunakan Tailwind CSS?

  • Cepat & Efisien: Tidak perlu menulis banyak CSS kustom.
  • Mudah Disesuaikan: Bisa mengatur desain sesuai kebutuhan tanpa override.
  • Responsif dengan Mudah: Mendukung breakpoints bawaan untuk desain responsif.

3. Cara Menggunakan Tailwind CSS

a. Menggunakan CDN (Cara Mudah)

Cara tercepat untuk mulai menggunakan Tailwind CSS adalah dengan menambahkan CDN langsung ke dalam file HTML.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog dengan Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-4xl font-bold text-center text-blue-600">Halo, Tailwind!</h1>
</body>
</html>
  • Kelebihan: Langsung bisa digunakan tanpa instalasi tambahan.
  • Kekurangan: Tidak bisa dikustomisasi lebih lanjut.

b. Menggunakan Tailwind dengan NPM (Cara Disarankan)

  1. Instal Tailwind CSS
  2. npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
  3. Konfigurasi Tailwind
    Buka tailwind.config.js dan tambahkan path HTML/JS agar Tailwind bisa menghapus class yang tidak digunakan (purge):
  4. module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}
  5. Buat File CSS dengan Tailwind
    Buat file styles.css dan tambahkan:
  6. @tailwind base;
@tailwind components;
@tailwind utilities;
  7. Jalankan Tailwind
  8. npx tailwindcss -i ./styles.css -o ./output.css --watch
  9. Gunakan di HTML
  10. <link rel="stylesheet" href="output.css">

4. Membuat Halaman Blog dengan Tailwind CSS

a. Struktur Dasar HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog dengan Tailwind</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
    <header class="bg-blue-600 p-4 text-white text-center text-3xl font-bold">
        Blog Tailwind CSS
    </header>
    <div class="max-w-3xl mx-auto mt-6 p-4 bg-white shadow-lg rounded-lg">
        <h2 class="text-2xl font-bold mb-4">Judul Artikel</h2>
        <p class="text-gray-600">Diterbitkan pada 12 Maret 2025</p>
        <p class="mt-4">Tailwind CSS mempermudah pembuatan tampilan website yang responsif dan menarik.</p>
        <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">Baca Selengkapnya</button>
    </div>
</body>
</html>

b. Penjelasan Class Tailwind yang Digunakan

  • bg-gray-100 → Latar belakang halaman warna abu-abu terang.
  • text-gray-800 → Warna teks lebih gelap.
  • max-w-3xl → Lebar maksimal konten agar tidak terlalu lebar.
  • mx-auto → Memusatkan elemen di tengah halaman.
  • p-4 → Padding (jarak dalam elemen).
  • shadow-lg → Memberikan efek bayangan.
  • rounded-lg → Membuat sudut elemen membulat.
  • hover:bg-blue-700 → Warna tombol berubah saat di-hover.

5. Membuat Halaman Responsif

Tailwind memiliki breakpoints bawaan:

  • sm: (≥640px)
  • md: (≥768px)
  • lg: (≥1024px)
  • xl: (≥1280px)

Contoh penggunaan:

<h1 class="text-xl md:text-3xl lg:text-4xl">Judul Besar di Layar Lebar</h1>
  • Pada layar kecil: text-xl
  • Di layar sedang: text-3xl
  • Di layar besar: text-4xl

6. Menambahkan Navigasi

Tambahkan navigasi responsif dengan Tailwind:

<nav class="bg-gray-800 text-white p-4 flex justify-between">
    <a href="#" class="text-lg font-bold">Blog</a>
    <ul class="hidden md:flex space-x-4">
        <li><a href="#" class="hover:text-blue-300">Home</a></li>
        <li><a href="#" class="hover:text-blue-300">Artikel</a></li>
        <li><a href="#" class="hover:text-blue-300">Kontak</a></li>
    </ul>
</nav>
  • hidden md:flex → Navigasi tersembunyi di layar kecil, muncul di layar sedang ke atas.
  • space-x-4 → Jarak antar elemen list.

7. Menambahkan Footer

<footer class="bg-gray-900 text-white text-center p-4 mt-8">
    &copy; 2025 Blog Tailwind - Semua Hak Dilindungi
</footer>

8. Kesimpulan

Dengan Tailwind CSS, kita bisa membuat halaman blog dengan cepat, responsif, dan tetap fleksibel. Framework ini sangat cocok untuk pemula maupun profesional karena kemudahan penggunaannya.

Langkah berikutnya:

  • Eksperimen dengan Utility Class Tailwind.
  • Gunakan Tailwind Components atau DaisyUI untuk UI yang lebih kompleks.
  • Pelajari Tailwind dengan PostCSS untuk performa yang lebih baik.


← Kembali ke daftar blog