Hasilnya sama, tapi lebih cepat, modular, dan efisien.
Tailwind sangat cocok buat yang pengen desain responsif tanpa mikirin grid dari nol.

Apa Itu GitHub Pages?

GitHub Pages adalah layanan hosting website gratis dari GitHub. Kamu bisa publish HTML, CSS, dan file statis lain langsung ke internet.

Alamat websitemu akan jadi seperti:

https://namakamu.github.io

Dan tampilannya bisa sekeren website premium — asal tahu cara setup Tailwind dengan benar.

📦 Apa yang Kamu Butuhkan?

✅ Akun GitHub
✅ Koneksi Internet
✅ Text Editor (VS Code sangat disarankan)
✅ Node.js + npm (buat build Tailwind)
✅ Sedikit semangat ngoprek 😄

🎯 Step by Step: Buat Website Gratis di GitHub.io dengan Tailwind CSS

1️⃣ Buat Akun GitHub dan Repo Baru

1. Kunjungi https://github.com
2. Daftar/login
3. Klik tombol + New Repository
4. Nama repository: namakamu.github.io
5. Centang Public dan Add README
6. Klik Create Repository

2️⃣ Install Tailwind CSS di Proyek Baru

Buka terminal / command prompt:

npx create-tailwindcss my-website

cd my-website

Jika belum punya create-tailwindcss, install manual:

mkdir my-website

cd my-website

npm init -y

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

3️⃣ Buat Struktur File HTML

Buat file index.html:

4️⃣ Atur Tailwind Config

Edit tailwind.config.js:

module.exports = {

content: [“./*.html”],

theme: {

extend: {},

},

plugins: [],

}

5️⃣ Buat File CSS Tailwind

Buat file input.css:

@tailwind base;

@tailwind components;

@tailwind utilities;

6️⃣ Build Tailwind ke Output CSS

Jalankan command:

npx tailwindcss -i ./input.css -o ./output.css –watch

Setelah itu file output.css akan terbuat. Ini yang akan kita gunakan di index.html.

7️⃣ Cek Hasil di Browser

Buka file index.html di browser kamu, dan lihat hasilnya.
Kalau tampilannya sudah sesuai, kita lanjut ke deploy ke GitHub.

8️⃣ Upload Proyek ke GitHub

1. Buka repo namakamu.github.io
2. Klik Add file > Upload files
3. Upload index.html, output.css, dan semua file pendukung
4. Commit file

9️⃣ Aktifkan GitHub Pages

1. Masuk ke repo kamu
2. Klik tab Settings
3. Scroll ke bawah ke bagian Pages
4. Di bagian Source, pilih main dan / (root)
5. Klik Save

Tunggu 1 menit, lalu buka:

https://namakamu.github.io

Voila! Website kamu sudah tampil online, responsive, dan super clean berkat Tailwind CSS.

📊 Tabel Perbandingan: Tailwind vs Framework Lain

Framework	Mudah Dipelajari	Responsif	Ukuran File	Tampilan Modern
Tailwind CSS	✅ Sangat Mudah	✅ Ya	🔁 Build Optimasi	✅ Sangat Keren
Bootstrap	✅ Mudah	✅ Ya	📦 Besar	⚠️ Umum banget
Bulma	⚠️ Terbatas	✅ Ya	📦 Medium	⚠️ Kurang fleksibel

📱 Website Seperti Apa yang Bisa Dibuat?

🌐 Portofolio Developer
🧠 Landing Page Produk
📑 CV Online Profesional
📚 Blog pribadi statis
💼 Toko Online katalog (tanpa payment system)

Tailwind CSS bikin semua itu terlihat lebih mahal, padahal bikinnya gratis.

⚠️ Tips Penting untuk Pemula

🚫 Jangan upload folder node_modules ke GitHub
✅ Build CSS dulu lalu upload hanya file final
📂 Gunakan folder assets untuk gambar & font
📎 Tambahkan file CNAME kalau pakai domain sendiri

❓ FAQ: Pertanyaan Seputar GitHub Pages + Tailwind

Harus bisa JavaScript?

❌ Nggak perlu. HTML + Tailwind aja udah cukup buat website elegan.

Bisa pakai template Tailwind gratis?

✅ Banyak banget! Cek situs seperti:

• https://tailwindcomponents.com
• https://tailgrids.com
• https://flowbite.com

Apakah gratis selamanya?

✅ GitHub Pages dan Tailwind CSS open-source dan 100% gratis.

Website bisa diakses di HP?

✅ Bisa. Tailwind responsif by default.