本教程是 Laravel 手册的一部分。从 https://flaviocopes.com/access/ 下载
首先要做的事是配置Vite,以启用使用Tailwind CSS进行样式设计。
首先打开终端,并运行以下命令:
npm install -D tailwindcss postcss autoprefixer
如果您还没有安装npm
,请先安装 Node.js。
这个命令将创建package.json
文件、package-lock.json
文件和node_modules
文件夹。
然后运行以下命令:
npx tailwindcss init -p
这将创建tailwind.config.js
和postcss.config.js
文件。
(如果您不熟悉npx
,可以查看我的npx教程。它会随着 Node.js 的安装自动安装为npm
。)
现在打开tailwind.config.js
,添加以下内容:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./resources/**/*.blade.php"],
theme: {
extend: {},
},
plugins: [],
};
在resources/css/app.css
中添加以下内容:
@tailwind base;
@tailwind components;
@tailwind utilities;
最后,在终端中运行npm run dev
,并在开发站点时保持其运行,同时运行php artisan serve
(在两个不同的终端窗口中运行)。
现在我们可以在 Blade 模板中使用 Tailwind CSS 了!
将下面这行代码添加到页面的head
部分:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*@vite('resources/css/app.css')*
如果刷新页面,您会立即看到页面上发生了一些变化。这是 Tailwind 添加的一些默认样式,这表明它已经起作用了!
现在我们可以在 HTML 的 body 标签中添加类来对页面进行样式设计,如:
<p **class="font-bold border-b-gray-300 border-b pb-2 mb-3"**>
Test
</p>
请注意,无论是在 VS Code 中保存文件还是在 Blade 模板中更改 Tailwind CSS 类,更改都会自动应用,无需刷新页面。这是 Vite 和 Laravel 在开发模式下提供的一种“魔法”。