/

使用 Tailwind CSS 和 Laravel

使用 Tailwind CSS 和 Laravel

本教程是 Laravel 手册的一部分。从 https://flaviocopes.com/access/ 下载

首先要做的事是配置Vite，以启用使用Tailwind CSS进行样式设计。

首先打开终端，并运行以下命令：

1
npm install -D tailwindcss postcss autoprefixer

如果您还没有安装npm，请先安装 Node.js。

这个命令将创建package.json文件、package-lock.json文件和node_modules文件夹。

然后运行以下命令：

1
npx tailwindcss init -p

这将创建tailwind.config.js和postcss.config.js文件。

（如果您不熟悉npx，可以查看我的npx教程。它会随着 Node.js 的安装自动安装为npm。）

现在打开tailwind.config.js，添加以下内容：

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
export default {
 content: ["./resources/**/*.blade.php"],
 theme: {
 extend: {},
 },
 plugins: [],
};

在resources/css/app.css中添加以下内容：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

最后，在终端中运行npm run dev，并在开发站点时保持其运行，同时运行php artisan serve（在两个不同的终端窗口中运行）。

现在我们可以在 Blade 模板中使用 Tailwind CSS 了！

将下面这行代码添加到页面的head部分：

1
2
3
4
5
6
7
8
<!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 标签中添加类来对页面进行样式设计，如：

1
2
3
<p **class="font-bold border-b-gray-300 border-b pb-2 mb-3"**>
 Test
</p>

请注意，无论是在 VS Code 中保存文件还是在 Blade 模板中更改 Tailwind CSS 类，更改都会自动应用，无需刷新页面。这是 Vite 和 Laravel 在开发模式下提供的一种“魔法”。