本教程是 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.jspostcss.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 在开发模式下提供的一种“魔法”。