Cara Menggunakan Tailwind CSS untuk Membuat Tema Hugo

26 July 2025 • 5 menit baca

Kenapa saya memilih tailwind karena Tailwind cukup populer sebagai framework utilitas untuk membangun tampilan web secara cepat dan modular. Pada artikel ini, saya akan sharing bagaimana cara mengintegrasikan Tailwind CSS ke dalam sebuah tema Hugo yang mau kita bikin, sehingga tema kita bisa memanfaatkan class-class utilitas Tailwind secara dinamis dan optimal.

Mengapa Memilih Pakai Hugo dan Tailwind?

Beberapa alasan kenapa saya memilih kombinasi antara Hugo dengan Tailwind cukup menarik, diantaranya:

Hugo disini adalah static site generator (SSG) yang cepat dan ideal untuk membuat web pribadi, blog, atau dokumentasi,
Tailwind memungkinkan styling tanpa harus menulis CSS dari nol — cukup gunakan utility class jika mau pakai custom sendiri,
Hugo (versi Extended) mendukung pipeline pengolahan asset seperti PostCSS dan minifikasi, yang menjadi kunci agar Tailwind bisa bekerja dengan baik di dalam proyek Hugo.

Catatan: Harus menggunakan Hugo Extended agar fitur-fitur pipeline seperti ‘resources.PostProcess’ dan ‘postCSS’ bisa berjalan. Hugo versi biasa tidak menyediakan fitur-fitur tersebut.

Dalam artikel ini, kita akan belajar:

Integrasi Tailwind CSS ke Hugo (menggunakan Hugo Extended)
Setup layout dasar (baseof.html)
Setup bagian (partials/head.html)
Pembuatan halaman utama (index.html)
Hasil akhir dan struktur proyek

Langkah-langkah Integrasi

Berikut adalah langkah-langkah umum untuk menerapkan Tailwind ke sebuah tema Hugo:

Siapkan Proyek Hugo. Jika kalian belum mempunyai draft proyek hugo, bisa lakukan ini terlebih dahulu:
```
hugo new site my-hugo-site
```
Tapi jika kalian sudah ada webnya, langsung skip dan lanjut step berikutnya.
Inisialisasi Node.js / npm

Kita akan memakai npm untuk menginstal tailwind, maka perlu membutuhkan package.json untuk konfigurasi dan versinya. Silahkan temen-temen ketikkan perintah berikut untuk membuat project Nodejs di dalam folder web hugo.
```
cd my-hugo-site ##ini untuk masuk ke folder project
npm init -y
```
Dari perintah tersebut akan menghasilkan file package.json yang berisi konfigurasi untuk project berbasis Nodejs
Install Tailwind

Sesuai namanya aja hugo tailwind, ya otomatis kita perlu membutuhkan TailwindCSS, sekalian sama PostCSS & Autoprefixer harus kita install semua. Silahkan ketikkan perintah berikut:
```
npm install -D tailwindcss postcss postcss-cli autoprefixer
```
Tunggu proses instalasi selesai
Konfigurasi Tailwind

Setelah tahap instalasi beres, kita tinggal konfigurasi TailwindCSS. Ketik perintah berikut untuk membuat file konfigurasi:
```
npx tailwindcss init
```
Ini akan menghasilkan file baru yaitu tailwind.config.js

File tersebut akan kita gunakan untuk konfigurasi tailwind kita, ubah isinya agar mencakup template hugo, misalnya:
```
module.exports = {
    content: [
        "./layouts/**/*.html",
        "./content/**/*.md",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}
```
Apakah ini sudah cukup?

Belum sob.. kita masih butuh satu file lagi konfigurasi untuk postcss. Buatlah file baru di folder project dengan nama postcss.config.js dan isikan sebagai berikut:
```
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}
```
Tambahkan File CSS Awal

Di direktori proyek hugo (atau dalam folder tema), buat folder assets/css dan di dalam css ada file main.css:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
File ini akan menjadi titik masuk (entry) CSS kita.

Membuat Layout Hugo

File layouts/_default/baseof.html

Ini adalah layout dasar pada hugo. Komponen pada halaman ini seperti index atau single akan mewarisi ini:

<!DOCTYPE html>
<html lang="id">
    <head>
        {{ partial "head.html" . }}
    </head>
    <body class="bg-gray-100 text-gray-900 font-sans">
        <header class="bg-white shadow p-4">
            <div class="container mx-auto">
                <h1 class="text-2xl font-bold"><a href="/">My Hugo Blog</a></h1>
            </div>
        </header>

        <main class="mt-8 container mx-auto px-4">
        {{ block "main" . }}{{ end }}
        </main>

        <footer class="bg-white shadow mt-12 p-4 text-center text-sm text-gray-600">
        &copy; {{ now.Year }} My Hugo Blog — Dibuat dengan Hugo + Tailwind CSS
        </footer>
    </body>
</html>

File layouts/partials/head.html

Nah dsini kita akan masukkan file Tailwind CSS hasil proses PostCSS kita tadi.

{{ $styles := resources.Get "css/main.css" | postCSS }}
{{ if hugo.IsServer }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
{{ else }}
    {{ $min := $styles | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $min.RelPermalink }}" integrity="{{ $min.Data.Integrity }}">
{{ end }}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }} | {{ .Site.Title }}</title>

Membuat Layout untuk Index (sebgai halaman utama)

Buatlah file index.html di dalam folder layouts dengan isi sebgai berikut:

{{ define "main" }}
<section>
   <h2 class="text-3xl font-bold mb-6 textcenter">Postingan Terbaru</h2>

   <div class="grid md:grid-cols-3 gap-6">
       {{ range first 6 .Site.RegularPages }}
       <article class="bg-white rounded shadow p-6 hover:shadow-lg transition">
           <h3 class="text-xl font-semibold mb-2">
               <a href="{{ .RelPermalink }}" class="text-blue-600 hover:underline">{{ .Title }}</a>
           </h3>
           <p class="text-gray-600 text-sm mb-4">{{ .Summary }}</p>
           <a href="{{ .RelPermalink }}" class="inline-block text-blue-500 text-sm">Baca selengkapnya →</a>
       </article>
       {{ end }}
   </div>
</section>
{{ end }}

Nah kode diatas tadi adalah untuk halaman utama situs kita nanti. Disini kita tampilkan daftar postingan dengan layout grid.

Menambahkan Postingan

Kita coba dengan menambahkan minimal 2/3 konten artikel untuk melihat hasilnya:
```
hugo new posts/contoh-post.md
```
Untuk awal pertama kali kita set membuat artikel, biasanya langsung generate dari hugo, dan awalnya seperti berikut.

Lalu kita edit isinya di content/posts/contoh-post.md:
```
---
title: "Contoh Post"
draft = true
date: 2025-10-15
---

# Isikan konten disini
Ini adalah contoh konten blog untuk menguji layout index.
```
Nah, kita ubah set pada draft menjadi false untuk bisa tampil di server hugo. Namun jika kita masih set draft post artikel ini dalam true artikel kita tidak akan tampil.
Percobaan Menjalankan Hugo

Untuk running web kita, silahkan ketikkan perintah berikut untuk menjalankan server hugo.
```
hugo server
```
Jika di terminal kita tidak ada yang error, maka konfigurasi tailwind kita berhasil. Silahkan buka chrome atau browser yang lain dan masukkan link localhost:1313 maka hasilnya seperti ini:

Dan,, yapppp berhasil sob.

Nah, sampai sini ada yang berhasil running juga sob??

Akhirnya, kita berhasil menggunakan Tailwind pada hugo.

Struktur Folder Proyek

Untuk memastikan semuanya rapi, berikut struktur akhir pada proyek kalian, silahkan dicek dan disamakan:

Struktur Folder Proyek

Penutup

Dengan mengikuti langkah-langkah di atas, maka kalian sudah berhasil membuat tema Hugo kustom sendiri menggunakan Tailwind CSS. Harapan saya, proyek ini bisa dikembangkan lebih jauh dengan:

Menambahkan layout single.html untuk halaman postingan
Membuat komponen navigasi, button, atau alert
Memanfaatkan @apply di CSS untuk membuat styling kustom

Ditulis oleh aboedhiprasojo

#hugo #tailwind