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 NPMSau đó, 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_applicationTiếp tục cài đặt Laravel Mix nhé.
npm installTrong 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"
}npm install -D tailwindcss@latest postcss@latest autoprefixer@latestNhư ở 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 initSau đó 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: [],
}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',
],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') ],
});
Dựa vào file trên, bạn sẽ nhận thấy 3 việc
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;
Đừ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>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.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.