如何使用Tailwind CSS和Laravel来创建漂亮的页面
每个 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="2345HAO166413de69da9128 max-w-md m-24 rounded overflow-hidden shadow-lg"> <img class="2345HAO13de69da9128e803 w-full" src="https://picsum.photos/400/300" alt="Blog Image"> <div class="2345HAO9e87a02ff60825a8 px-6 py-4"> <h2 class="2345HAOa02ff60825a841a0 font-bold text-2xl mb-2">This is My Blog Title</h2> <p class="2345HAOf60825a841a0482c 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="2345HAO25a841a0482cd474 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 的应用程序。
- 单击添加新构建包后出现的 “Deploy Now” 按钮，如下图所示。
在 Kinsta 上添加构建包后部署应用程序
- 最后，进入应用程序的 “Processes” 选项卡，编辑默认 Web 进程，并将其 Start command 替换为以下内容：
npm run build && heroku-php-apache2
更新 Kinsta 的进程启动命令
更新启动命令后，应用程序将自动使用新命令重新部署。部署成功后，您就可以访问域，查看您创建的精美卡片组件，并开始测试和开发应用程序。
小结
Tailwind 可使您的 Laravel 项目从简单的基本功能升级到惊人的完美效果。它易于使用，无需大量代码即可实现所需外观。
扫描二维码推送至手机访问。
版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。
“如何使用Tailwind CSS和Laravel来创建漂亮的页面” 的相关文章
宝塔面板教程之主界面管理篇
本章节主要是对宝塔面板的主界面的各个版本进行一个简单的说明。 宝塔面板主界面主要包括：服务器操作系统、服务器状态、站点信息、软件管理及网络流量几个部分。 Windows面板有部分功能未实现，其余部分与Linux面板同步。 系统操作...
宝塔面板教程之FTP管理篇
使用宝塔面板，您可以快速地创建一个FTP管理账户，对网站文件进行管理。但有必要提醒大家的是，使用FTP远不如使用SFTP安全，你可以查看文章“”进一步了解两者之间的差异。 此外，宝塔面板的文件管理模块其实已经能够满足站长的大部分文件管理需求。当然，如果你非得要使用FTP管理服务器文件，可以参照以下...
宝塔面板教程之软件管理篇
宝塔面板提供丰富的软件以一键安装，这让服务器环境搭建提供不少的便利性，站长可以根据实际需求快速编译安装以实现不同的功能需求。 软件管理，主要是宝塔提供的一些面板扩展插件。 Nginx Nginx是一个高性能的HTTP和反向代理服务器，具有轻量级、占用内存小，并发能力强等优势。 w...
宝塔面板教程之计划任务篇
宝塔面板的计划任务，主要用于安排和管理需要定时执行的任务，如备份、内存清理等。其实对于大部分站长来说，主要使用该板块的备份网站、备份数据库及释放内存的三个定时任务计划。 Shell脚本的添加 输入任务名称，选择执行周期，输入执行的脚本内容。 注意事项： 输入脚本内容...
2022年Web开发人员的平均工资统计报告
想成为一名网络开发人员或好奇工作的哪些子类型的薪水最高？Web开发是一个竞争激烈、多样化的行业，随着新语言和框架的出现而不断发展。 询问Web开发人员的薪水是一个难以解决的问题（尽管我们尝试）。有太多的因素需要考虑。 无论您是自由开发者还是有兴趣从事更传统的工作、喜欢前端或后端工作，或者想知...
揭开Laravel面纱：用于构建Web应用程序的跨平台PHP框架
近年来，Web应用程序和网站的开发变得越来越简单。即使是我们当中最受技术挑战的人也已经相当熟练地使用WordPress和Wix等产品。 对于更高级的开发人员，有许多工具可以帮助简化开发过程。这些工具中最有用的工具之一是Laravel。 本文回答了“什么是Laravel？”这个问题。通过将其分...