วิธีใช้ 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
ได้เลย
ความคิดเห็น
แสดงความคิดเห็นได้โดยไม่ต้องเข้าสู่ระบบ พิมพ์ความคิดเห็นแล้วกด Post ได้เลยครับ