ข้ามไปยังเนื้อหา

Tailwind CSS กับ Hugo

อัปเดตล่าสุด / เผยแพร่เมื่อ
Tailwind CSS กับ Hugo

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

อัปเดต 10 ธ.ค. 64
อัปเดตเนื้อหาสำหรับ Tailwind CSS v3.0

ก่อนอื่นติดตั้ง 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 ได้เลย

ℹ️ Hugo Pipes
ในโพสต์นี้ผมใช้ Tailwind CLI เนื่องจาก Hugo Pipes ยังไม่รองรับ Tailwind JIT แต่มีวิธีแก้ชั่วคราวอยู่ ถ้าใครต้องการใช้งาน Hugo Pipes ลองดูความคิดเห็นนี้บน GitHub

ความคิดเห็น

แสดงความคิดเห็นได้โดยไม่ต้องเข้าสู่ระบบ พิมพ์ความคิดเห็นแล้วกด Post ได้เลยครับ

RSS สร้างด้วย Hugo ซอร์สโค้ด