raviyatechnical / laravel-ui-tailwindcss
Laravel 前端预设 Tailwind CSS
v1.0.0
2022-11-13 06:12 UTC
Requires
- laravel/framework: ^9.0
- laravel/ui: ^3.4
This package is auto-updated.
Last update: 2024-09-19 17:05:50 UTC
README
A Laravel 前端脚手架预设 Tailwind CSS - 用于快速 UI 开发的实用优先 CSS 框架。
使用方法
- 安装 Laravel >= 9.0 并
cd到您的应用目录。 - 通过
composer require raviyatechnical/laravel-ui-tailwindcss --dev安装此预设。Laravel 将自动发现此包。无需注册服务提供者。
a. 对于无认证预设
- 使用
php artisan ui tailwindcss安装基本的 Tailwind CSS 预设 npm install && npm run devphp artisan serve(或等效命令) 来运行服务器并测试预设。
b. 对于带有认证的预设
- 使用
php artisan ui tailwindcss --auth来一次安装基本预设、认证路由入口和 Tailwind CSS 认证视图。(注意:如果您多次运行此命令,请确保清理routes/web.php中的重复认证条目) npm install && npm run dev- 配置您喜欢的数据库(mysql、sqlite 等)
php artisan migrate来创建基本用户表。php artisan serve(或等效命令) 来运行服务器并测试预设。
配置
此包包含的默认 tailwind.config.js 配置文件只是简单地使用 Tailwind vendor 文件的配置。如果您想进行更改,应该删除该文件并运行 node_modules/.bin/tailwind init,这将为您生成一个新的配置文件,您可以自由地更改以满足您的需求。
在 resources/lang/XX/pagination.php 文件中为您的应用使用的每种语言添加一个新的 i18n 字符串
'previous' => '« Previous', 'next' => 'Next »', 'goto_page' => 'Goto page #:page', // Add this line
这应该有助于提高可访问性
<li> <a href="URL?page=2" class="..." aria-label="Goto page #2" > 2 </a> </li>
分页
Laravel 现在直接支持 Tailwind CSS 分页。如果您想在您的应用中使用这些视图,可以参考 文档。
截图
https://github.com/laravel-frontend-presets/tailwindcss 的第一次灵感





