Panduan Lengkap Membuat Website dengan Astro dan Tailwind CSS

Tutorial step by step membuat website modern menggunakan Astro dan Tailwind CSS. Pelajari cara mengintegrasikan kedua teknologi ini untuk membuat website yang cepat, responsif, dan mudah dimaintain.

25 Januari 2025 • 15 menit baca • Oleh Hilal Technologic Blog

#astro #tailwind css #web development #tutorial #frontend #css #javascript

🚀 Panduan Lengkap Membuat Website dengan Astro dan Tailwind CSS

Astro dan Tailwind CSS adalah kombinasi yang sangat powerful untuk membuat website modern. Astro memberikan performa luar biasa dengan pendekatan “zero JavaScript by default”, sementara Tailwind CSS memungkinkan styling yang cepat dan konsisten. Di artikel ini, kita akan belajar cara membuat website menggunakan kedua teknologi ini dari awal sampai akhir.

📋 Yang Akan Kita Pelajari

Setup project Astro dengan Tailwind CSS
Struktur project yang optimal
Membuat komponen yang reusable
Styling dengan Tailwind CSS
Best practices dan tips

🛠️ Prerequisites

Sebelum mulai, pastikan kamu sudah punya:

Node.js versi 16 atau lebih baru
Text editor (VS Code recommended)
Pemahaman dasar HTML, CSS, dan JavaScript
Terminal/Command Prompt

🎯 Step 1: Setup Project

1.1 Membuat Project Baru

# Buat project baru dengan npm
npm create astro@latest my-astro-site

# Masuk ke direktori project
cd my-astro-site

# Install dependencies
npm install

1.2 Mengintegrasikan Tailwind CSS

# Install Tailwind CSS dan dependencies
npm install -D tailwindcss @astrojs/tailwind postcss autoprefixer

# Generate file konfigurasi Tailwind
npx tailwindcss init

1.3 Konfigurasi Astro dan Tailwind

Buat file astro.config.mjs:

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()],
});

Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

🏗️ Step 2: Struktur Project

2.1 Organisasi Folder

src/
├── components/    # Komponen reusable
├── layouts/       # Layout templates
├── pages/         # Route pages
├── styles/        # Global styles
└── utils/         # Helper functions

2.2 Membuat Layout Dasar

// src/layouts/BaseLayout.astro
---
const { title, description } = Astro.props;
---

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body class="bg-white dark:bg-gray-900">
    <slot />
  </body>
</html>

💅 Step 3: Styling dengan Tailwind CSS

3.1 Komponen Header

// src/components/Header.astro
---
---

<header class="bg-white dark:bg-gray-800 shadow-sm">
  <nav class="container mx-auto px-4 py-4">
    <div class="flex justify-between items-center">
      <a href="/" class="text-2xl font-bold text-gray-800 dark:text-white">
        My Website
      </a>
      
      <div class="space-x-4">
        <a href="/about" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
          About
        </a>
        <a href="/blog" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
          Blog
        </a>
        <a href="/contact" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
          Contact
        </a>
      </div>
    </div>
  </nav>
</header>

3.2 Hero Section

// src/components/Hero.astro
---
---

<section class="py-20 bg-gradient-to-br from-primary-50 to-blue-100 dark:from-gray-900 dark:to-gray-800">
  <div class="container mx-auto px-4 text-center">
    <h1 class="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
      Welcome to My Website
    </h1>
    <p class="text-xl text-gray-800 dark:text-gray-200 mb-8 max-w-2xl mx-auto">
      Built with Astro and styled with Tailwind CSS for maximum performance and flexibility.
    </p>
    <a href="#learn-more" class="bg-primary-600 hover:bg-primary-700 text-white font-medium px-6 py-3 rounded-lg inline-block">
      Learn More
    </a>
  </div>
</section>

🔧 Step 4: Membuat Halaman

4.1 Homepage

// src/pages/index.astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Hero from '../components/Hero.astro';
---

<BaseLayout
  title="My Website - Home"
  description="Welcome to my website built with Astro and Tailwind CSS"
>
  <Header />
  <Hero />
  <main class="container mx-auto px-4 py-12">
    <!-- Content here -->
  </main>
</BaseLayout>

🎨 Step 5: Customisasi Tema

5.1 Extend Tailwind Theme

Update tailwind.config.js untuk menambahkan warna dan font kustom:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... tambahkan warna lainnya
        }
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

🚀 Step 6: Optimasi

6.1 Performance Tips

Gunakan Image Component Astro

import { Image } from 'astro:assets';

<Image
  src={import('../assets/hero.jpg')}
  alt="Hero image"
  width={800}
  height={600}
/>

Lazy Loading Components

---
const HeavyComponent = await import('../components/HeavyComponent.astro');
---

6.2 SEO Optimization

// src/components/SEO.astro
---
const { title, description, image } = Astro.props;
---

<meta name="title" content={title} />
<meta name="description" content={description} />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image} />

📱 Step 7: Responsive Design

7.1 Mobile-First Approach

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Grid items -->
</div>

<nav class="hidden md:flex space-x-4">
  <!-- Desktop navigation -->
</nav>

<button class="md:hidden">
  <!-- Mobile menu button -->
</button>

🎉 Kesimpulan

Sekarang kamu sudah memiliki fondasi yang kuat untuk membuat website modern dengan Astro dan Tailwind CSS! Beberapa key takeaways:

Astro memberikan performa yang luar biasa dengan pendekatan partial hydration
Tailwind CSS memungkinkan styling yang cepat dan konsisten
Kombinasi keduanya ideal untuk membuat website yang cepat dan mudah dimaintain

🔗 Resources Tambahan

📝 Next Steps

Pelajari cara mengintegrasikan CMS headless
Implementasi dark mode
Tambahkan animasi dan transisi
Setup continuous deployment

Artikel ini ditulis dengan ❤️ oleh Hilal Technologic