实例讲解如何通过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 项目从简单的基本功能升级到惊人的完美效果。它易于使用,无需大量代码即可实现所需外观。