Cara Install Tailwind Hugo

JagoTekno - Setelah menggunakan Bulma, kini saatnya saya menggunakan Tailwind untuk web Hugo saya karena class-class Tailwind lebih mudah dipahami dari pada Bulma.

Tailwind merupakan salah satu CSS Framework yang ada di dunia. Ini merupakan css framework saya. Dengan tailwind saya bisa menciptakan berbagai macan halaman website yang keren dengan sangat mudah.

Tailwind benar-benar mudah karena di sana kita hanya menulis class class pada setiap tag html yang dibuat.

Tapi jika ingin menggunakan Tailwind di Hugo ini butuh trik khusus.

Karena untuk menjalankan Tailwind saat mendevelop website kita perlu menjalankan node server.

Untuk tutorial kali ini saya khususkan untuk anda yang menggunakan Cloudflare Pages untuk hosting website hugo di sana. Jika anda mengikuti langkah-langkahnya dengan benar, maka proses build hugo Cloudflare pages akan berjalan normal.

Jadi berikut langkah-langkah saya menggunakan Tailwind di Hugo.

1. Pastikan anda sudah install NodeJS dan NPM.

2. Download konfigurasi tailwind untuk github

3. Backup folder /assets/css/ jika ada.

4. Extract file konfigurasi tailwind hugo yang sudah didownload dari github.

5. Buka folder root website hugo anda kemudian copy file ini ke folder root anda.

   • package.json

   • tailwind.config.js

   • /assets/css/main.css

6. Buka terminal di folder root lalu jalankan perintah npm install. Maka sistem akan menginstall tailwind dan komponen yang diperlukan.

7. Sekarang buatlah sebuah tema baru, atau copy saja tema Blank dari github. Lalu buka file _baseof.html lalu pada bagian kode ini untuk menginisialisasi theme hugo.

{{ $styles := resources.Get "/css/style.css"  }}

{{ if .Site.IsServer }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}"/>
{{ else }}
  {{ $styles := $styles | minify   }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
{{ end }}

8. Jika anda membuat tema baru dengan perintah hugo new theme namatheeme. Maka edit dulu file tailwind.config.js yang sudah dicopy ke root folder web hugo, sehingga menjadi seperti ini:

module.exports = {
  content: ['./layouts/**/*.html', 
            './content/**/*.md',
            './themes/namatheme/layouts/**/*.html' ],
  theme: {
    extend: {
        typography: {
            DEFAULT: {
                css: {
                    "code::before": {content: ''},
                    "code::after": {content: ''}
                }
            }
        }
    }
},
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Kode ini akan membuat semua file di dalam folder layouts theme akan dibaca oleh tailwind.

9. Sekarang mari mulai membuat tema hugo dengan tailwind. Buka terminal di folder root hugo anda lalu ketik npm run start. Perintah ini akan otomatis menjalnkan tailwind jit dan hugo server.

10. Perhatikan perubahan pada folder /assets/css/sytle.css dia akan mengenerate css dari tailwind dan akan terus menggenerate setiap kali anda melakukan perubahan.

Di sini kita tidak perlu install PostCss dan Autoprefixer karena Tailwind JIG akan mengerjakannya secara otomatis.

Setelah development selesai, silahkan push ke github. Maka secara otomatis juga Github Pages akan mendeteksi perubahan lalu merender lagi website Hugo anda.

Demikian tutorial singkat tentang cara menggunakan tailwind di Hugo untuk dihosting di Github Pages.