- หลังจากติดตั้ง
laravelให้ติดตั้ง node packages พื้นฐานที่มาพร้อมกับlaravel
npm install- ติดตั้ง
tailwindcssด้วยคำสั่ง
npm install tailwindcss --save-dev- ติดตั้งตัวช่วย config ระหว่าง
tailwindcssกับlaravel-mix
npm install laravel-mix-tailwind --save-dev- ติดตั้งตัวช่วย config ระหว่าง
purgeCSSกับlaravel-mix
npm install laravel-mix-purgecss --save-dev- สร้างไฟล์ config สำหรับ
tailwindcssด้วยคำสั่ง
npx tailwind init
// output => ./tailwind.config.js-
สร้างไฟล์ css สำหรับโปรเจค ตั้งชื่อว่าอะไรก็ได้ เช่น
resources/css/app.css -
ในไฟล์ css ตามข้อ 6 ให้ import module ของ
tailwindcssมาใช้งาน
/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;- เขียนไฟล์
webpack.mix.jsเพื่อให้สามารถ compile ไฟล์ css ตามนี้
// ใช้งาน laravel-mix
const mix = require('laravel-mix');
// load การใช้งาน tailwind และ purgeCSS ใน laravel-mix
require('laravel-mix-tailwind');
require('laravel-mix-purgecss');
// compile css file [source] => [destination]
mix.postCss('resources/css/app.css', 'public/css')
.tailwind('./tailwind.config.js');
// หาก compile เพื่อใช้ใน production ให้ทำ version และ purgeCSS
if (mix.inProduction()) {
mix.version()
.purgeCss()
} else {
mix.sourceMaps()
}- ทดลอง compile css ด้วยคำสั่ง
npm run dev- ในไฟล์
bladeอ้างอิงถึงไฟล์ css ด้วยmix()เพื่อกำหนด version ของไฟล์ให้อัตโนมัติ
<head>
...
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
...
</head>