Installation
Thiết lập Tailwind CSS trong dự án Laravel.
Bắt đầu bằng cách tạo một dự án Laravel mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng Laravel installer.
laravel new my-projectcd my-projectCài đặt @tailwindcss/vite và các peer dependencies thông qua npm.
npm install tailwindcss @tailwindcss/viteThêm plugin @tailwindcss/vite vào cấu hình Vite của bạn.
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), // … ],})Thêm @import vào ./resources/css/app.css để import Tailwind CSS. Ngoài ra, hãy báo cho Tailwind CSS biết để quét một số thư mục tìm các utility.
@import "tailwindcss";@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';@source '../../storage/framework/views/*.php';@source '../**/*.blade.php';@source '../**/*.js';Chạy quá trình build với npm run dev.
npm run devĐảm bảo CSS đã biên dịch được thêm vào <head> sau đó bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.
<!doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @vite('resources/css/app.css') </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>