使用 Laravel 安装 Tailwind CSS
在 Laravel 项目中设置 Tailwind CSS。
使用 Vite
创建项目
如果还没有 Laravel 项目，先创建一个。最常见的做法是使用 Laravel installer。
Terminal
shelllaravel new my-project
cd my-project安装 Tailwind CSS
通过 npm 安装 @tailwindcss/vite 及其对等依赖。
Terminal
shellnpm install tailwindcss @tailwindcss/vite配置 Vite 插件
将 @tailwindcss/vite 插件加入 Vite 配置。
vite.config.ts
tsimport { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
// …
],
})导入 Tailwind CSS
在 ./resources/css/app.css 中添加 @import 以导入 Tailwind CSS。另外，让 Tailwind CSS 扫描若干目录以查找工具类。
app.css
css@import "tailwindcss";
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";启动构建
使用 npm run dev 运行构建流程。
Terminal
shellnpm run dev在项目中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中，然后使用 Tailwind 的工具类为内容添加样式。
app.blade.php
blade<!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">
<!-- prettier-ignore -->
Hello world!
</h1>
</body>
</html>使用 Laravel Mix
安装 Tailwind CSS
通过 npm 安装 @tailwindcss/postcss 及其对等依赖。
Terminal
shellnpm install tailwindcss @tailwindcss/postcss postcss将 Tailwind 加入 Laravel Mix 配置
在 webpack.mix.js 中将 tailwindcss 添加为 PostCSS 插件。
webpack.mix.js
jsmix
.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("@tailwindcss/postcss"),
]);导入 Tailwind CSS
在 ./resources/css/app.css 中添加 @import 以导入 Tailwind CSS。另外，让 Tailwind CSS 扫描若干目录以查找工具类。
app.css
css@import "tailwindcss";
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";启动构建
使用 npm run watch 运行构建流程。
Terminal
shellnpm run watch在项目中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中，然后使用 Tailwind 的工具类为内容添加样式。
app.blade.php
blade<!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">
<!-- prettier-ignore -->
Hello world!
</h1>
</body>
</html>