Laravel: ใช้ Tailwind css ร่วมกับ Boostrap

เนื่องด้วย Laravel มาพร้อมกับ Laravel Mix อยู่แล้ว ผมจะติดตั้ง Tailwind css ผ่าน npm ครับ

ขั้นตอนแรกก็ไปยัง project Laravel แล้วก็ทำการติดตั้ง มาลงที่เครื่องก่อนเลยครับ

yarn add tailwindcss --dev

ต่อมาก็สร้าง config ไฟล์ขึ้นมาครับ โดย Tailwind จะมี CLI มาให้เลยครับ

./node_modules/.bin/tailwind init

หลังจากรันคำสั่งนี้มาแล้วเราจะได้ไฟล์ tailwind.js ที่ project’s root เราเลยครับ โดยที่ไฟล์นี้เราสามารถปรับแต่งค่าต่างเองได้ เช่น สี, breakpoints ของ screen size, font, ขนาด font เป็นต้น

โดยผมจะปล่อยทุกอย่างไว้เหมือนเดิม แต่จะมีจุดนึงที่ผมต้องการแก้ไข ก็คือค่า Prefix ผมต้องการจะใส่ tw- เพื่อเข้าไป เพื่อป้องการไม่ให้ class ซ้ำกับของ Bootstrap (เคสนี้ผมยังคงใช้ Bootstrap อยู่)

ที่ล่างสุดของไฟล์ tailwind.js ผมเพิ่ม tw- ที่ options prefix ครับ

options: {
  prefix: 'tw-',
  important: false,
  separator: ':',
},

ต่อมาก็ต้องเพิ่ม tailwind directive ที่ไฟล์ resource/sass/app.scss

@tailwind preflight;
@tailwind components;
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@tailwind utilities;

ข้อมูลเพิ่มเติม https://tailwindcss.com/docs/installation/#3-use-tailwind-in-your-css

ขั้นตอนสุดท้ายครับ คือการบอกให้ Laravel Mix ทำการ process tailwind ให้เราด้วย

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.js') ],
});

src: https://tailwindcss.com/docs/installation#laravel-mix

สุดท้ายก็รันคำสั่ง ข้างล่างนี่เพื่อทำการ build ไฟล์ครับ

yarn dev

เราจะได้ ไฟล์ public/css/app.css มา ก็อย่าลืมเอาไปใส่ไว้ใน template ของเรานะครับ

เสร็จแล้วครับสำหรับขั้นตอนการนำ tailwind มาใช้ร่วมกับ Laravel รวมทั้ง Bootstrap แต่ต้องระลึกไว้เสมอนะครับ ว่าเราจะใช้ class ไหนของ Tailwind เราต้อง prefix tw- เข้าไปด้วยทุกครั้งนะครับ เช่น ปกติเราอยากให้ background ของเราเป็นสีแดง จาก bg-redก็ต้องใช้ tw-bg-red แทนครับ