Cài đặt Tailwind CSS với Laravel

Thiết lập Tailwind CSS trong dự án Laravel.

Cài đặt Tailwind CSS

Cài đặt @tailwindcss/postcss và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Thêm Tailwind vào cấu hình Laravel Mix của bạn

Trong file webpack.mix.js của bạn, thêm tailwindcss như một plugin PostCSS.

webpack.mix.js

mix  .js("resources/js/app.js", "public/js")  .postCss("resources/css/app.css", "public/css", [    require("@tailwindcss/postcss"),  ]);

Import Tailwind CSS

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.

app.css

@import "tailwindcss";@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';@source '../../storage/framework/views/*.php';@source '../**/*.blade.php';@source '../**/*.js';

Bắt đầu quá trình build

Chạy quá trình build với npm run watch.

Terminal

npm run watch

Bắt đầu sử dụng Tailwind trong dự án của bạn

Đả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.

app.blade.php

<!doctype html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link href="{{ asset('css/app.css') }}" rel="stylesheet" />  </head>  <body>    <h1 class="text-3xl font-bold underline">      Hello world!    </h1>  </body></html>