Panduan lengkap membuat website responsif dengan Tailwind CSS

Tailwind CSS telah menjadi pilihan utama bagi developer yang menginginkan fleksibilitas desain tanpa menulis CSS berulang. Pada panduan ini, kami akan membimbing Anda langkah demi langkah membuat website responsif yang sesuai dengan identitas modern APA ITU.

Mengapa Tailwind CSS?

• Utility‑first: Kelas kecil yang dapat digabungkan untuk menghasilkan komponen lengkap.
• Responsive design built‑in: Prefix sm:, md:, lg:, xl: memudahkan pengaturan breakpoint.
• Customizable: File konfigurasi tailwind.config.js memungkinkan penyesuaian warna, spacing, dan typography.
• Performance: Purge CSS menghilangkan kelas yang tidak terpakai, menghasilkan bundle file kecil.

Langkah 1: Persiapan lingkungan

1. Pastikan Node.js (versi 18+) terinstall.
2. Buat folder proyek: mkdir apaitu-website && cd apaitu-website
3. Inisialisasi npm: npm init -y
4. Install Tailwind dan dependensinya: npm install -D tailwindcss postcss autoprefixer
5. Generate file konfigurasi: npx tailwindcss init -p

Langkah 2: Konfigurasi Tailwind

Edit tailwind.config.js untuk menambahkan path ke file template WordPress (PHP) sehingga purge bekerja secara optimal:

module.exports = {
  content: [
    "./**/*.php",
    "./src/**/*.js",
    "./src/**/*.jsx",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#1A73E8",
        secondary: "#F5F5F5",
      },
    },
  },
  plugins: [],
};

Langkah 3: Buat file CSS utama

Buat file src/styles.css dengan isi berikut:

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

Langkah 4: Build CSS

Tambahkan script build pada package.json:

"scripts": {
  "build": "npx tailwindcss -i ./src/styles.css -o ./public/css/tailwind.css --minify"
}

Jalankan npm run build. File tailwind.css siap di‑enqueue di WordPress.

Langkah 5: Enqueue di tema WordPress

function apaitu_enqueue_styles() {
    wp_enqueue_style( 'tailwind', get_template_directory_uri() . '/public/css/tailwind.css', [], null );
    wp_enqueue_style( 'apaitu-style', get_stylesheet_uri(), ['tailwind'], wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'apaitu_enqueue_styles' );

Langkah 6: Membuat layout responsif

Header dengan navigation

<header class="bg-primary text-white py-4 shadow-md">
  <div class="container mx-auto flex justify-between items-center px-4">
    <h1 class="text-2xl font-semibold">APA ITU</h1>
    <nav class="hidden md:flex space-x-6">
      <a href="/" class="hover:underline">Beranda</a>
      <a href="/kategori/teknologi" class="hover:underline">Teknologi</a>
      <a href="/kategori/panduan" class="hover:underline">Panduan</a>
    </nav>
    <button class="md:hidden" aria-label="Menu">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> ... </svg>
    </button>
  </div>
</header>

Artikel grid responsif

<section class="container mx-auto px-4 py-8">
  <div class="grid gap-6 grid-cols-1 sm:grid-cols‑2 lg:grid‑cols‑3">
    <article class="bg-white rounded-lg shadow-sm overflow-hidden">
      <img src="/images/seo.jpg" alt="SEO" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-bold mb-2">Apa itu SEO</h2>
        <p class="text-gray-600">Penjelasan singkat tentang optimasi mesin pencari...</p>
        <a href="/apa-itu-seo" class="text-primary hover:underline mt-2 block">Baca selengkapnya</a>
      </div>
    </article>
    
  </div>
</section>

Tips responsif lanjutan

• Gunakan aspect‑ratio utility (mis. aspect‑video) untuk mempertahankan rasio elemen media.
• Manfaatkan space‑x‑4 dan space‑y‑4 untuk mengatur spasi secara konsisten.
• Gunakan dark mode dengan dark: prefix jika ingin menambahkan tema gelap.

Deploy ke produksi

Setelah selesai, jalankan npm run build lagi untuk menghasilkan CSS minified. Upload folder public ke server WordPress dan pastikan enqueue berfungsi di lingkungan produksi.

Kesimpulan

Tailwind CSS memudahkan pembuatan tampilan modern, bersih, dan responsif yang sejalan dengan identitas APA ITU. Dengan mengikuti panduan ini, Anda dapat menghasilkan situs yang cepat, SEO‑friendly, dan siap bersaing di pasar pendidikan digital Indonesia.