科技资讯

Document

实例讲解如何通过Tailwind CSS和Laravel创建页面

如何使用Tailwind CSS和Laravel来创建漂亮的页面

每个 Laravel 网站都可使用样式，而 Tailwind CSS 是最简单的方法，为网站增添光彩。这个实用的 CSS 框架提供预定义的类，设计 HTML 元素风格。无需编写无尽的 CSS 代码，您可快速创建自定义网页，并轻松维护和扩展样式表。

Tailwind 与 Alpine.js 和 Livewire 都是 TALL 协议栈的一部分。Laravel 社区构建了这个全栈开发解决方案，帮助各种技能水平的开发人员快速构建网络应用程序原型。这些解决方案易于使用，无需深厚的前端或后端技术知识。

这篇实践文章将探讨如何使用 Tailwind CSS 为你的 Laravel 项目增色。

使用 Tailwind 增强你的 Laravel 项目

要开始使用，先创建一个基本的 Laravel 页面，然后使用 Tailwind CSS 以最小的代价为其设计样式。

前提条件

要跟上本教程，你需要

要查看最终项目，请查看完整的项目代码。

Laravel 项目和设置 Tailwind

使用 Composer 创建一个新的 Laravel 项目：

1. 打开终端，进入项目所在目录并运行：

composer create-project laravel/laravel my-project

2. 进入my-project目录，安装所需的软件包：

cd my-project

3. 安装与 Tailwind 配合使用的软件包：

npm install -D tailwindcss postcss autoprefixer

4. 运行以下命令来设置尾风的配置文件：

npx tailwindcss init -p

此操作会在项目根目录下放置两个文件：tailwind.config.js 和 postcss.config.js。

配置模板路径

1. 接下来，在 tailwind.config.js 文件中配置模板路径。Laravel 默认在公共目录下查找 CSS 文件。模板路径告诉 Laravel 在哪里可以找到应用程序的 CSS 文件。

2. 用以下代码替换 tailwind.config.js 文件中的代码：

/** @type {import('tailwindcss').Config} */

module.exports = {

content: [

"./resources/**/*.blade.php",

"./resources/**/*.js",

"./resources/**/*.vue",

],

theme: {

extend: {},

},

plugins: [],

}

将 Tailwind CSS 指令添加到项目的 CSS 中

1. 要为 Tailwind CSS 添加指令，请进入 resources/css 文件夹并打开 app.css 文件。

2. 然后，添加以下代码：

@tailwind base;

@tailwind components;

@tailwind utilities;

构建应用程序

在本地运行应用程序之前：

1. 启动 Vite 开发服务器：

npm run dev

该命令捆绑静态资产文件，包括 Tailwind CSS，并启动 Vite 本地服务器。

2. 使用 Artisan 运行你的 Laravel 应用程序：

php artisan serve

现在，您的应用程序应运行在 http://127.0.0.1:8000/ 。它会显示新创建的 Laravel 应用程序的默认输出。

打开 resources/views/welcome.blade.php 路由视图文件，可以看到其中已经使用了 Tailwind 实用工具类。

如何制作简单的Tailwind组件

为了更好地了解 Tailwind 的工作原理：

1. 打开 resources/views/welcome.blade.php。

2. 删除应用程序欢迎视图中的代码。

3. 将其替换为下面的代码，即可渲染出漂亮的卡片组件：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@vite('resources/css/app.css')

<title>Document</title>

</head>

<body>

<div class="max-w-md m-24 rounded overflow-hidden shadow-lg">

<img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">

<div class="px-6 py-4">

<h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>

<p class="mt-3 text-gray-600 text-base">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,

exercitationem praesentium nihil.

</p>

<button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">

Read More

</button>

</div>

</div>

</body>

</html>

上面的代码使用 Vite 通过  @vite('resources/css/app.css') 导入 app.css 文件。它还导入了 Tailwind。它使用这些 Tailwind CSS 实用工具类创建了一个基本标记组件，用于模拟博客卡片：

  • max-w-sm — 将容器的最大宽度设置为 sm（小）断点尺寸。
  • m-24 — 为容器的所有边添加 24 个单位（96px 或 6rem）的边距。
  • rounded — 添加边框半径，使容器的边角呈圆形。
  • overflow-hidden — 隐藏任何溢出容器的内容。
  • shadow-lg — 为容器添加阴影效果。
  • w-full — 将图像宽度设置为容器的 100%。
  • px-6 py-4 — 在 x 轴上添加 6 个单位（24px 或 1.5rem）的填充，在 y 轴上添加 4 个单位（16px 或 1rem）的填充。
  • font-bold — 将文本的字号设置为粗体。
  • text-xl — 将文本的字体大小设置为超大。
  • mb-2 — 为元素添加 2 个单位（0.5rem 或 8px）的下边框。
  • text-gray-600 — 将文字颜色设置为深灰色。
  • text-base — 将文本字体大小设置为默认值。

在浏览器中预览应用程序时，应该会看到与下图类似的输出结果。

网页组件示例

网页组件示例

将您的 Laravel Tailwind 项目部署到服务器

在使用 Kinsta 部署和托管 Laravel 应用程序之前，请再做一些更改，以确保托管后能正常运行。

1. 打开 app/Http/Middleware/TrustProxies.php。更改 protected $proxies 的值，使 Laravel 应用程序信任所有代理：

protected $proxies = '*';

2. 在项目根目录下新建一个 .htaccess 文件，并粘贴以下代码：

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteRule ^(.*)$ public/$1 [L]

</IfModule>

3. 创建一个新的 Git 仓库并将代码推送至该仓库（Kinsta 支持从 GitHub、GitLab 和 Bitbucket 推送代码）。

4. 登录你的 Kinsta 账户或创建一个新账户。进入 MyKinsta 控制面板后，单击 “Add service” 按钮，然后选择 “Application“，如下图所示。

在 MyKinsta 上添加应用程序

在 MyKinsta 上添加应用程序

MyKinsta 会提示您连接 Git 账户。按照要求完成授权，然后选择之前推送到版本库的项目和要使用的分支。

在 Kinsta 上配置新应用程序的详细信息

在 Kinsta 上配置新应用程序的详细信息

5. 在 Environment variables 部分添加 Laravel APP_KEY 。密钥位于本地项目目录的 .env 文件中。

在 Kinsta 上配置应用程序环境变量

在 Kinsta 上配置应用程序环境变量

6. 单击 “Continue “，然后根据您的偏好选择构建环境。

7. 将 “Resources” 部分的开始 命令暂时留空，然后单击 “Continue” 继续。

8. 最后，填写付款信息。部署工作立即开始。

要正常运行应用程序，您需要两个构建包： PHP 用于运行 php 命令，Node.js 用于运行 npm 命令。为此，您需要

9. 进入应用程序，在左侧导航栏点击 Settings。

10. 单击 Add buildpack，然后添加 Node.js 和 PHP 的构建包。不过，请确保在序列中最后添加 PHP 构建包，因为这是一个基于 PHP 的应用程序。

单击添加新构建包后出现的 “Deploy Now” 按钮，如下图所示。

在 Kinsta 上添加构建包后部署应用程序

在 Kinsta 上添加构建包后部署应用程序

最后，进入应用程序的 “Processes” 选项卡，编辑默认 Web 进程，并将其 Start command 替换为以下内容：

npm run build && heroku-php-apache2

更新 Kinsta 的进程启动命令

更新 Kinsta 的进程启动命令

更新启动命令后，应用程序将自动使用新命令重新部署。部署成功后，您就可以访问域，查看您创建的精美卡片组件，并开始测试和开发应用程序。

小结

Tailwind 可使您的 Laravel 项目从简单的基本功能升级到惊人的完美效果。它易于使用，无需大量代码即可实现所需外观。