Tailwind CSS กับ Hugo

วิธีใช้ Tailwind CSS ในเว็บที่สร้างด้วย Hugo แบบง่ายๆ ทำได้ 2 วิธีคือผ่าน Hugo Pipes หรือใช้ Tailwind CLI

ก่อนอื่นติดตั้ง Tailwind CSS

npm install tailwindcss --save-dev

และสร้างไฟล์ config ของ Tailwind tailwind.config.js ด้วยคำสั่ง

npx tailwindcss init

Hugo Pipes

วิธีแรกคือใช้งานผ่าน Hugo Pipes ด้วย PostCSS โดยต้องติดตั้ง packages เหล่านี้เพิ่ม

npm install postcss postcss-cli autoprefixer --save-dev

ต่อมาสร้างไฟล์ postcss.config.js และวางโค้ดด้านล่างนี้

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

จากนั้นสร้างไฟล์ main.css ขึ้นมาในโฟลเดอร์ assets/css แล้ววางโค้ดนี้ลงไป

@tailwind base;
@tailwind components;
@tailwind utilities;

สุดท้ายใส่โค้ดนี้ในเทมเพลตของ Hugo เพื่อใส่ CSS ในเว็บไซต์

{{ $css := resources.Get "css/main.css" | resources.PostCSS (dict
"inlineImports" true) }}
{{ if hugo.IsProduction }}
  {{ $css = $css | minify }}
  <link rel="stylesheet" href="{{ $css.Permalink | relURL }}" />
{{ else }}
  <link rel="stylesheet" href="{{ $css.Permalink | relURL }}" />
{{ end }}

Tailwind CLI

อีกวิธีที่ตอนนี้ผมใช้อยู่คือใช้ผ่าน Tailwind CLI วิธีนี้แนะนำเฉพาะคนที่ต้องการใช้ Tailwind JIT ถ้าไม่ได้ใช้แนะนำวิธีข้างบนดีกว่า

ก่อนอื่นเปิดใช้ Tailwind JIT โดยเพิ่มโค้ดนี้ลงในไฟล์ tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: {
    content: [
      './layouts/**/*.html',
      './content/**/*.md',
      './content/**/*.html',
    ],
  },
  // ...
};

ในส่วน purge ถ้าใช้ Tailwind เฉพาะในเทมเพลต สามารถลบ 2 บรรทัดล่างที่ขึ้นต้นด้วย ./content/ ออกได้ หรือถ้ามีใช้ Tailwind ในโฟลเดอร์อื่นๆ นอกจากนี้ อย่าลืมเพิ่มให้ครบด้วยนะครับ

ขั้นตอนต่อมา ให้สร้างไฟล์ tailwind.css ขึ้นมาในโฟลเดอร์ assets/css แล้ววางโค้ดนี้ลงไป

@tailwind base;
@tailwind components;
@tailwind utilities;

และในไฟล์ package.json เพิ่ม 2 scripts นี้

{
  "scripts": {
    "dev": "NODE_ENV=development npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/main.css --watch",
    "build": "NODE_ENV=production npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/main.css --minify && hugo"
}

สุดท้ายใช้โค้ดด้านล่างนี้ในเทมเพลตของ Hugo เพื่อใส่ CSS ในเว็บไซต์

{{ $css := resources.Get "css/main.css" }}
<link rel="stylesheet" href="{{ $css.Permalink | relURL }}" />

เวลาทำเว็บ ต้องเปิด 2 terminal โดยอันแรกสำหรับ Tailwind

npm run dev

และอีกอันสำหรับ Hugo

hugo server

ส่วนเวลา build เว็บใช้

npm run build