Hướng dẫn tích hợp Tailwind CSS vào project Laravel

Posted on by mtoplistChuyên mục:Top List

Trước khi bắt đầu dùng Tailwind CSS bạn nên nhớ, nó khác với hoàn toàn các framework css khác, nó không cung cấp một bộ UI Kit có sẵn, nó chỉ tập trung vào “Utility-first”.

Giả sử là chúng ta có một project Laravel đã setup xong rồi nhé.

Cài đặt gói Tailwind CSS

Chạy lệnh sau để cài Tailwind CSS nha

// cài bằng npm
npm install tailwindcss --save-dev

// cài bằng yarn
yarn add tailwindcss --dev

Tạo file cấu hình tailwind.js

Chạy lệnh sau để tạo ra file cấu hình tailwind.js

# dùng npm
npx tailwind init
# dùng Yarn
yarn tailwind init

Import vào CSS

Sau khi tạo file cấu hình bạn tiến hành import component tailwind vào css/css process file. Mình dùng sass nên sẽ bỏ vào file resources/sass/app.css. Tailwind CSS cung cấp 3 component chính, bạn lựa chọn dùng hết hay chỉ từng phần

  • @tailwind preflight;
  • @tailwind components;
  • @tailwind utilities;

Cấu hình vào Laravel Mix

Ở đầu file webpack.mix.js bạn thêm dòng

const tailwindcss = require('tailwindcss')

Tiếp đến ở phần sass() bạn sửa một chút

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

Xong rồi đó, chạy lệnh: npm run dev và đã có Tailwind CSS rồi đó. Đọc thêm tài liệu tại trang chủ nhé: https://tailwindcss.com/ 

mtoplist