koramit/laravel-6-tailwindcss.md

## laravel-6-tailwindcss.md

      
    Raw
  

              laravel-6-tailwindcss.md
            
          
    Laravel 6.x with TailwindCSS


หลังจากติดตั้ง 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>