วิธีใช้ Tailwind CSS แบบ Local (เวอร์ชัน 4.1)
บทความนี้จะแนะนำวิธีติดตั้ง Tailwind CSS 4.1 แบบ Local (ไม่พึ่ง CDN) เหมาะสำหรับเว็บไซต์ที่ต้องการความเร็ว ปลอดภัย และควบคุมเวอร์ชันได้ด้วยตัวเอง เช่น WHMCS, ระบบบัญชี, หรือเว็บโฮสติ้ง
✅ ขั้นตอนที่ 1: ติดตั้ง Node.js
ให้ดาวน์โหลดและติดตั้ง Node.js จาก https://nodejs.org/ จากนั้นเปิด Terminal หรือ Command Prompt และตรวจสอบคำสั่ง:
node -v
npm -v✅ ขั้นตอนที่ 2: สร้างโปรเจกต์ Tailwind CSS
mkdir tailwind-project
cd tailwind-project
npm init -y✅ ขั้นตอนที่ 3: ติดตั้ง Tailwind CSS CLI
Tailwind CSS 4.x แยก CLI ออกมาต่างหาก ต้องติดตั้งดังนี้:
npm install -D tailwindcss@4.1.0 tailwindcss-cli@latest✅ ขั้นตอนที่ 4: สร้างไฟล์ config และ input CSS
npx tailwindcss-cli@latest init -pจากนั้นสร้างไฟล์ css/input.css แล้วใส่:
@tailwind base;
@tailwind components;
@tailwind utilities;✅ ขั้นตอนที่ 5: แก้ไข tailwind.config.js
เพื่อให้ Tailwind สแกนไฟล์ของคุณได้อย่างถูกต้อง:
module.exports = {
content: [
"./**/*.html",
"./**/*.php",
"./**/*.js"
],
safelist: [
'bg-blue-500', 'text-white', 'hover:bg-green-500',
'rounded', 'p-4', 'text-xl'
],
theme: {
extend: {},
},
plugins: [],
}✅ ขั้นตอนที่ 6: สั่ง Build CSS
เพื่อสร้างไฟล์ CSS ที่พร้อมใช้งานจริง:
npx tailwindcss-cli@latest -i ./css/input.css -o ./dist/tailwind.css --minify✅ ขั้นตอนที่ 7: ใช้งานไฟล์ CSS ที่ได้
นำไฟล์ tailwind.css ไปวางในโฟลเดอร์เว็บไซต์ของคุณ แล้วเรียกใช้ด้วย:
<link href="css/tailwind.css" rel="stylesheet">หากใช้กับ WHMCS แนะนำให้อัปโหลดไปที่: templates/{your-theme}/css/tailwind.css
หมายเหตุเพิ่มเติม
- ต้องรัน build ใหม่ทุกครั้งที่เพิ่ม class ใน HTML
- ถ้าใช้ class แบบ dynamic เช่น
text-ต้องเพิ่มไว้ในsafelist - ควรใช้
base_url()หรือ path ที่ถูกต้องตาม WHMCS
จบขั้นตอน ✅ คุณสามารถใช้งาน Tailwind CSS 4.1 แบบ local ได้เต็มรูปแบบแล้ว!
