Tailwind CSS กับ Hugo

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

ก่อนอื่นติดตั้ง Tailwind CSS และ Concurrently

npm install tailwindcss concurrently --save-dev

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

npx tailwindcss init

ตั้งค่า content โดยเพิ่มโค้ดในไฟล์ tailwind.config.js

// tailwind.config.js
module.exports = {
  content: ['./layouts/**/*.html', './content/**/*.md', './content/**/*.html'],
  // ...
};

ถ้าใช้ 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": {
    "server": "concurrently -k npm:tailwind:watch npm:hugo:server",
    "hugo:server": "hugo server",
    "tailwind:watch": "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 server เพื่อเริ่มเซิร์ฟเวอร์ Hugo และสั่งให้ Tailwind อัปเดต CSS ทุกครั้งเมื่อมีการแก้ไขไฟล์

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