当前位置：首页 > 编程语言 > 正文内容

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

a811625533年前 (2023-08-01)编程语言20

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

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

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

使用 Tailwind 增强你的 Laravel 项目

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

前提条件

要跟上本教程，你需要

  • 已安装 和 。
  • 已安装 和 npm。
  • 用于部署的 MyKinsta 账户。如果还没有账户，请。

要查看最终项目，请查看。

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="2345HAObff1e54254d6d303 max-w-md  m-24 rounded overflow-hidden shadow-lg">
<img class="2345HAOe54254d6d30388b2 w-full" src="https://picsum.photos/400/300" alt="Blog Image">
<div class="2345HAOadb4ed77cb219887 px-6 py-4">
<h2 class="2345HAOed77cb21988756fa font-bold text-2xl mb-2">This is My Blog Title</h2>
<p class="2345HAOcb21988756fa700d 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="2345HAO988756fa700d06ab 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- *** — 将容器的更大宽度设置为 *** （小）断点尺寸。
  • 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 账户或创建一个新账户。进入 后，单击 “Add service” 按钮，然后选择 “Application“，如下图所示。

在 MyKinsta 上添加应用程序

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

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

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

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

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

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

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

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

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

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

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

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

  1. 最后，进入应用程序的 “Processes” 选项卡，编辑默认 Web 进程，并将其 Start command 替换为以下内容：
npm run build && heroku-php-apache2

更新 Kinsta 的进程启动命令

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

小结

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

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8050.html

分享给朋友：
返回列表

上一篇：如何在Laravel中创建博客

下一篇：如何使用Laravel进行CRUD（创建、读取、更新和删除）

“如何使用Tailwind CSS和Laravel来创建漂亮的页面” 的相关文章

什么是JavaScript？网络上最流行的脚本语言一瞥

什么是JavaScript？网络上最流行的脚本语言一瞥

谁在尝试访问某些网站时没有遇到过更新Java的请求？ 虽然许多人通过交互式网站功能熟悉Java，但用户可能不太熟悉JavaScript——或者，实际上，他们可能错误地认为两者是相同的。 在本文中，我们将讨论JavaScript 是什么以及Java和JavaScript之间的区别。然后我们将概...

宝塔面板教程之安装及常见问题篇

宝塔面板教程之安装及常见问题篇

宝塔面板现在已经成为国内许多站长必备的服务器管理必备工具。相比直接使用SSH+FTP来管理服务器，宝塔面板可以提供可视化管理，包括文件管理、数据库管理、数据备份、SSL配置等等。 如果你希望更简单高效地管理您的网站及服务器，宝塔面板是不错的选择。下面是一些宝塔面板安装及常见问题：...

宝塔面板教程之主界面管理篇

宝塔面板教程之主界面管理篇

本章节主要是对宝塔面板的主界面的各个版本进行一个简单的说明。 宝塔面板主界面主要包括：服务器操作系统、服务器状态、站点信息、软件管理及网络流量几个部分。 Windows面板有部分功能未实现，其余部分与Linux面板同步。 系统操作...

宝塔面板教程之网站管理篇

宝塔面板教程之网站管理篇

宝塔面板中的网站管理是非常重要的一部分，也是站长经常需要使用到的功能模块。网站管理，主要用于管理和创建WEB站点。如果您是宝塔面板的使用用户，应该对此模块有充分的了解，以便于您更高效地管理网站。 宝塔面板网站管理模块包括：添加新网站、修改默认页、设置默认站点、站点列表、站点的运行与停止、备份站点、...

宝塔面板教程之软件管理篇

宝塔面板教程之软件管理篇

宝塔面板提供丰富的软件以一键安装，这让服务器环境搭建提供不少的便利性，站长可以根据实际需求快速编译安装以实现不同的功能需求。 软件管理，主要是宝塔提供的一些面板扩展插件。 Nginx Nginx是一个高性能的HTTP和反向代理服务器，具有轻量级、占用内存小，并发能力强等优势。 w...

什么是Node.js以及为什么要使用它

什么是Node.js以及为什么要使用它

JavaScript是世界上最流行的编程语言之一。今天，它为数百万个网站提供支持，并吸引了成群的开发人员和设计人员为Web构建功能。如果您是编程新手，那么 JavaScript很容易成为之一。 在最初的20年里，JavaScript主要用于客户端脚本。由于JavaScript只能在<scr...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第463626名访客 今日有3篇新文章/评论