Tailwind CSS กับ Hugo

วิธีใช้ Tailwind CSS ในเว็บที่สร้างด้วย Hugo

ก่อนอื่นติดตั้ง Tailwind CSS และเพื่อความสะดวกตอนทำเว็บ ผมแนะนำให้ติดตั้ง Concurrently ด้วย

npm install tailwindcss concurrently --save-dev

จากนั้นสร้างไฟล์ config ของ Tailwind tailwind.config.js

npx tailwindcss init

เปิดใช้ Tailwind JIT และตั้งค่า purge โดยเพิ่มโค้ดในไฟล์ tailwind.config.js

// 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;

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

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

สุดท้ายในไฟล์ package.json เพิ่ม scripts ตามนี้

{
  "scripts": {
    "dev": "concurrently -k npm:tailwind npm:hugo",
    "hugo": "hugo server",
    "tailwind": "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"
}

เวลาทำเว็บ ใช้ npm run dev เพื่อเริ่มเซิร์ฟเวอร์ Hugo และสั่งให้ Tailwind อัปเดต CSS ทุกครั้งเมื่อมีการแก้ไขไฟล์

ส่วนเวลา build เว็บก็ใช้ npm run build ได้เลย