Hướng dẫn cài TailwindCSS & SASS/SCSS cùng Laravel 8.x

Microvn28 tháng 6 • 4 min read • 

Sau một thời gian dài khoảng vài năm không code PHP mình đã quay trở lại thông qua một dự án khá hay ho. Trong quá trình nghiên cứu để cập nhật lại công nghệ mình mong muốn sử dụng TailwindCSS cho dự án này. Mình đã dành một chút thời gian để tìm hiểu về các hướng dẫn nhưng hầu như nó đã cũ so với Laravel 8.x. Sau đó mình có tìm hiểu thêm và đã thành công. Dưới đây mình sẽ mô tả lại quá trình đó.

Để mà nói Laravel sở hữu công cụ Laravel Mix thực sự tuyệt vời. Đã giúp cho mình cải thiện việc xử lý Javascript và CSS đơn giản hơn rất nhiều. Trong số các công nghệ CSS hiện nay có vẻ như gu của mình là SCSS vì vậy bài viết này sẽ chỉ tập trung vào nó mà thôi. Bắt đầu nào!!!

Đầu tiên, hãy chắc chắn rằng máy cá nhân của bạn đã cài Nodejs. Bạn có thể kiểm tra nó bằng 2 câu lệnh dưới đây trong terminal của bạn. Nếu chưa có Nodejs bạn có thể cài đặt nó từ trang chủ.

node -v #trả về phiên bản của Nodejs
npm -v #trả về phiên bản của NPM
Kiểm tra xem đã có Nodejs và NPM chưa

Sau đó, hãy cài đặt Laravel Mix và các thư viện đi kèm. Trước hết hãy truy cập tới đường dẫn của ứng dụng Laravel của bạn thông qua câu lệnh

cd /path_to_laravel_application
Đừng quên thay path_to_laravel_application bằng đường dẫn trên máy bạn nhé

Tiếp tục cài đặt Laravel Mix nhé.

npm install
Đừng quên thay path_to_laravel_application bằng đường dẫn trên máy bạn nhé

Trong quá trình nghiên cứu, mình thấy nhiều tài liệu cũng như nhiều bạn cài bản cũ bị lỗi do PostCSS đã cập nhật. Ở bài viết này mình sẽ hướng dẫn bạn cài bản mới nhất hiện tại với các phiên bản sau

{
        "autoprefixer": "^10.2.6",
        "laravel-mix": "^6.0.25",
        "postcss": "^8.3.5",
        "postcss-loader": "^6.1.0",
        "sass": "^1.35.1",
        "sass-loader": "^12.1.0",
        "tailwindcss": "^2.2.4"
    }
Bạn có thể sửa lại thông tin các gói rồi npm install lại một lần nữa nhé
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Hoặc chạy dòng lệnh này để cài các gói mới nhất

Như ở bài trước, mình đã giới thiệu và hướng dẫn đơn giản về TailwindCSS rồi, mình sẽ không nhắc lại nhiều nữa.

Tiếp tục với tạo tệp cấu hình TailwindCSS

npx tailwindcss init
Bạn chạy dòng lệnh này để khởi tạo tệp mặc định nhé

Sau đó một tệp tailwind.config.js sẽ được tạo ở ngay gốc thư mục ứng dụng của bạn với nội dung cơ bản như sau

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
Ở đây có rất nhiều thông tin nhưng đừng lo lắng. Bạn có thể đọc thêm ở đây

Theo như dự án của mình, mình sẽ chỉ lọc lấy các class ở blade.php. Các bạn có thể lấy thêm tùy ý của mình nhé. Quy tắc rất đơn giản.

purge: [
	'./resources/**/*.blade.php',
	'./Modules/**/resources/*.blade.php',
],
Dự án của mình chạy trên kiến trúc HMVC nên có thêm Modules nữa. Các bạn không cần có thể bỏ đi

Bạn sẽ cần điều chỉnh lại một chút ở tập tin webpack.mix.js giống như thế này

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });
Bạn cần chỉnh sửa lại để Laravel Mix nhận SASS/SCSS và cấu hình của TailwindCSS

Dựa vào file trên, bạn sẽ nhận thấy 3 việc

  1. Mình đã chuyển đổi từ CSS sang SCSS thông qua hàm sass
  2. Mình đã bổ sung Tailwind vào dự án thông qua postCSS làm transform.
  3. Vẫn sử dụng cấu hình mặc định, mình sẽ để nó build vào public/css.

Các bạn đừng quên chèn import của Tailwind vào file gốc app.scss nhé

/* ./resources/sass/app.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;
Chèn lại các thành phần của Tailwind lên đầu file nhé.

Đừng quên chèn load file app.css vào ứng dụng của bạn nhé

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <title>@yield('title')</title>
</head>
Chèn app.css vào header của trong layout này.

Công việc đã hoàn thành rồi, bước cuối cùng bạn sẽ cần chạy nó dựa vào các công việc dưới đây

npm run dev #Dành cho môi trường phát triển
npm run watch #Dành cho bạn đang phát triển dự án, Mix sẽ lắng nghe các tệp tin bị thay dổi
npm run prod #Dành cho môi trường sản xuất.
Hãy chạy câu lệnh này để Mix sẽ chuyển đổi giúp bạn nhé.

Happy coding, guys!

Vui lòng ghi nguồn bài viết khi sao chép nội dung trong bài này, cảm ơn các bạn.