November 19, 2023 tailwind hugo
Cara Menggunakan Tailwind Di Hugo
Tailwind adalah framework yang menyediakan utilitas css untuk membuat desain pada web.
Hugo adalah SSG Generator yang dibuat dalam bahasa Go.
Untuk menggunakan tailwind pada hugo caranya bisa menggunakan hugo pipe dan postcss.
Postcss adalah alat untuk mentransformasi kode css menggunakan plugin-plugin yang disediakan, salah satunya tailwind.
Langsung saja berikut langkah-langkah menggunakan tailwind di hugo.
Instal Tailwind dan PostCSS
Masuk ke direktori proyek hugo. Install tailwind dan postcss menggunakan npm.
npm install -D tailwindcss postcss autoprefixer
Kemudian buat file konfigurasi tailwind dan postcss menggunakan perintah berikut.
npx tailwindcss init -p
Ada dua file yang otomatis dibuat, postcss.config.js dan tailwind.config.js.
Buka file tailwind.config.js, di properti content, tambahkan direktori atau file yang nantinya akan digunakan tailwind di sana.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./layouts/**/*.html",
"./assets/**/*.js"
],
theme: {
extend: {},
},
plugins: [],
}
Menambahkan Tailwind
Buat file css dengan nama style.css (atau bisa nama yang lain) di dalam direktori assets/css.
mkdir -p assets/css
touch assets/css/style.css
Buka file style.css, tambahkan direktif tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;
Menggunakan Tailwind
Selanjutnya buka file layout yang berisi tag head untuk menggunakan css. Misal di proyek saya filenya di layouts/partials/head/link.html.
Tambahkan file css ke tag link dengan menggunakan resources dari file style.css yang berisi tailwind yang sudah dibuat pada langkah sebelumnya.
{{ with resources.Get "css/style.css" | postCSS }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
Selanjutnya coba anda tambahkan class tailwind pada file tertentu, misal layouts/index.html, seharusnya tailwind sudah dapat digunakan.
<h1 class="font-bold text-2xl">Test</h1>