Integrasi Tailwind CSS dengan Hugo: Setup dan Konfigurasi Lengkap
Integrasi Tailwind CSS dengan Hugo: Setup dan Konfigurasi Lengkap
Tailwind CSS adalah utility-first CSS framework yang sangat populer di kalangan developer modern. Integrasi Tailwind CSS dengan Hugo memungkinkan Anda membangun website yang beautiful dan responsive dengan efisiensi pengembangan yang tinggi. Dalam panduan ini, kita akan membahas secara komprehensif cara mengintegrasikan Tailwind CSS dengan Hugo, mulai dari setup dasar hingga konfigurasi advanced untuk workflow pengembangan yang optimal.
Kombinasi Hugo dan Tailwind CSS adalah pilihan yang powerful karena Hugo menyediakan static site generation yang cepat dengan sistem templating yang powerful, sementara Tailwind CSS menawarkan pendekatan utility-first yang sangat fleksibel untuk styling. Hugo Extended (versi dengan dukungan Sass) diperlukan untuk processing Tailwind CSS karena memerlukan PostCSS dan Autoprefixer.
Persiapan dan Instalasi
Sebelum memulai integrasi, pastikan Anda telah menginstal Hugo Extended dan Node.js di sistem Anda. Hugo Extended diperlukan karena ia mendukung asset pipeline yang diperlukan untuk memproses Tailwind CSS.
Memeriksa Versi Hugo
hugo version
Pastikan output menunjukkan “extended”. Jika tidak, Anda perlu menginstal Hugo Extended sesuai dengan sistem operasi Anda yang telah dibahas di artikel sebelumnya.
Inisialisasi Proyek Node.js
Jika Anda belum memiliki package.json di proyek Hugo, inisialisasikan:
npm init -y
Ini akan membuat file package.json yang diperlukan untuk mengelola dependencies Tailwind CSS.
Instalasi Tailwind CSS dan Dependencies
Instal Tailwind CSS, PostCSS, dan Autoprefixer sebagai dev dependencies:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Atau menggunakan Yarn:
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
Konfigurasi Tailwind CSS
Buat file konfigurasi Tailwind CSS dengan menjalankan:
npx tailwindcss init -p
Perintah ini akan membuat dua file: tailwind.config.js dan postcss.config.js.
Konfigurasi tailwind.config.js
Edit tailwind.config.js untuk menyesuaikan dengan proyek Hugo Anda:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./hugo.toml',
'./hugo_*.toml',
'./layouts/**/*.html',
'./content/**/*.md',
'./content/**/*.html',
'./static/**/*.html',
],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
950: '#082f49',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
950: '#020617',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
serif: ['Merriweather', 'Georgia', 'serif'],
mono: ['JetBrains Mono', 'monospace'],
},
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.gray.700'),
a: {
color: theme('colors.primary.600'),
'&:hover': {
color: theme('colors.primary.700'),
},
},
},
},
}),
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
],
}
Konfigurasi postcss.config.js
File postcss.config.js yang dihasilkan:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Membuat File CSS Tailwind
Buat file CSS utama yang mengimpor Tailwind directives:
/* assets/css/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
scroll-behavior: smooth;
}
body {
@apply antialiased text-gray-900 bg-white;
}
h1, h2, h3, h4, h5, h6 {
@apply font-bold tracking-tight;
}
}
@layer components {
.btn {
@apply inline-flex items-center justify-center px-4 py-2
font-medium rounded-lg transition-colors duration-200
focus:outline-none focus:ring-2 focus:ring-offset-2;
}
.btn-primary {
@apply btn bg-primary-600 text-white hover:bg-primary-700
focus:ring-primary-500;
}
.btn-secondary {
@apply btn bg-secondary-200 text-secondary-800 hover:bg-secondary-300
focus:ring-secondary-400;
}
.card {
@apply bg-white rounded-xl shadow-md overflow-hidden
transition-shadow duration-200 hover:shadow-lg;
}
.input {
@apply w-full px-4 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-primary-500
focus:border-transparent transition-colors;
}
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
.gradient-text {
@apply bg-clip-text text-transparent bg-gradient-to-r
from-primary-600 to-secondary-600;
}
}
Menghubungkan CSS dengan Hugo
Hugo menggunakan assets pipeline untuk memproses CSS. Ada beberapa cara untuk menghubungkan Tailwind CSS dengan Hugo.
Metode 1: Menggunakan Hugo Pipes (Recommended)
Buat layout partial untuk CSS:
{{/* layouts/partials/css.html */}}
{{- $style := resources.Get "css/main.css" | resources.PostCSS | minify | fingerprint -}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
Tambahkan di head template:
{{/* layouts/_default/baseof.html */}}
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }} | {{ .Site.Title }}</title>
{{ partial "css.html" . }}
</head>
<body>
{{ block "main" . }}{{ end }}
</body>
</html>
Metode 2: Menggunakan Hugo Modules
Alternatif lain adalah menggunakan Hugo modules untuk Tailwind:
# hugo.toml
[module]
[module.hugoVersion]
extended = true
min = "0.110.0"
[[module.imports]]
path = "github.com/onepointcollab/one_planet"
Development Workflow
Untuk development, gunakan Hugo server dengan live reload:
hugo server
Saat development, Tailwind akan watch file Anda dan otomatis rebuild saat ada perubahan. Untuk development yang lebih cepat, Anda juga bisa menggunakan npm scripts:
{
"scripts": {
"dev": "concurrently \"hugo server\" \"npm run watch:css\"",
"build": "hugo --minify && npm run build:css",
"build:css": "tailwindcss -i ./assets/css/main.css -o ./static/css/main.css --minify",
"watch:css": "tailwindcss -i ./assets/css/main.css -o ./static/css/main.css --watch"
},
"devDependencies": {
"autoprefixer": "^10.4.17",
"concurrently": "^8.2.2",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1"
}
}
Tailwind CSS dengan Hugo Shortcodes
Tailwind CSS sangat powerful ketika dikombinasikan dengan Hugo shortcodes untuk membuat komponen reusable:
{{/* layouts/shortcodes/button.html */}}
{{- $type := .Get "type" | default "primary" -}}
{{- $href := .Get "href" | default "#" -}}
{{- $size := .Get "size" | default "md" -}}
<a href="{{ $href }}"
class="btn btn-{{ $type }} btn-{{ $size }}
{{- if eq $size "sm" }} text-sm px-3 py-1.5
{{- else if eq $size "lg" }} text-lg px-6 py-3
{{- else }} text-base px-4 py-2{{- end }}">
{{ .Inner }}
</a>
{{/* layouts/shortcodes/card.html */}}
{{- $class := .Get "class" | default "" -}}
<div class="card {{ $class }}">
{{- with .Get "image" -}}
<img src="{{ . }}" alt="" class="w-full h-48 object-cover">
{{- end -}}
<div class="p-6">
{{- with .Get "title" -}}
<h3 class="text-xl font-bold mb-2">{{ . }}</h3>
{{- end -}}
<div class="prose">
{{ .Inner | .Page.RenderString }}
</div>
</div>
</div>
Responsive Design dengan Tailwind
Tailwind CSS menyediakan breakpoint utilities yang powerful untuk responsive design:
<nav class="flex flex-col md:flex-row md:items-center md:justify-between p-4">
<div class="flex items-center">
<img src="/logo.svg" alt="Logo" class="h-8 w-8 md:h-10 md:w-10">
<span class="ml-2 text-lg md:text-xl font-bold">My Site</span>
</div>
<div class="mt-4 md:mt-0 flex flex-col md:flex-row gap-4">
<a href="/" class="text-sm md:text-base hover:text-primary-600">Beranda</a>
<a href="/about" class="text-sm md:text-base hover:text-primary-600">Tentang</a>
<a href="/contact" class="text-sm md:text-base hover:text-primary-600">Kontak</a>
</div>
</nav>
Dark Mode dengan Tailwind dan Hugo
Implementasi dark mode dengan Tailwind dan Hugo:
{{/* layouts/partials/theme-toggle.html */}}
<script>
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
<button id="theme-toggle" class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<svg id="sun-icon" class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<svg id="moon-icon" class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</button>
<script>
document.getElementById('theme-toggle').addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
}
});
</script>
Production Build
Untuk production build dengan Tailwind CSS, Hugo akan memproses CSS melalui pipeline:
hugo --minify
Pastikan PostCSS dan Tailwind terinstal dengan benar dan path content di tailwind.config.js mencakup semua file yang menggunakan Tailwind classes.
Troubleshooting Common Issues
Beberapa masalah umum yang mungkin dihadapi beserta solusinya perlu diperhatikan. Jika Tailwind classes tidak berfungsi, pastikan file CSS di-import dengan benar di template dan path di content sudah ditambahkan di tailwind.config.js. Jika ada error “PostCSS not found”, instal PostCSS sebagai dependency dengan npm install -D postcss. Jika Hugo Extended tidak terinstal, reinstall Hugo dengan versi extended yang mendukung asset pipeline.
Kesimpulan
Integrasi Tailwind CSS dengan Hugo memberikan workflow pengembangan yang powerful dan efisien. Dengan setup yang benar, Anda dapat membangun website yang beautiful, responsive, dan performant. Kombinasi Hugo untuk static site generation dan Tailwind CSS untuk styling adalah pilihan yang sangat direkomendasikan untuk proyek web modern.
Artikel Terkait
Link Postingan : https://www.tirinfo.com/integrasi-tailwind-css-hugo/