Laravel Tailwind CSS 前端预设

安装次数: 388 170

依赖者: 7

建议者: 0

安全: 0

星星: 1 146

关注者: 37

分支: 141

开放问题: 3

语言:Blade

4.3.1 2020-09-13 00:01 UTC

README

这是一个为 Tailwind CSS 设计的 Laravel 前端脚手架预设 - 一个以工具优先的 CSS 框架,用于快速 UI 开发。

用法

  1. 安装 Laravel >= 7.0 并 cd 到您的应用目录。
  2. 使用 composer require laravel-frontend-presets/tailwindcss --dev 安装此预设。Laravel 将自动发现此包。无需注册服务提供者。

a. 对于无认证的预设

  1. 使用 php artisan ui tailwindcss 安装基本 Tailwind CSS 预设
  2. npm install && npm run dev
  3. 使用 php artisan serve (或等效命令) 运行服务器并测试预设。

b. 对于有认证的预设

  1. 使用 php artisan ui tailwindcss --auth 一次性安装基本预设、认证路由条目和 Tailwind CSS 认证视图。(注意:如果您多次运行此命令,请确保在 routes/web.php 中清理重复的 Auth 条目)
  2. npm install && npm run dev
  3. 配置您喜欢的数据库(mysql、sqlite 等)
  4. 使用 php artisan migrate 创建基本用户表。
  5. 使用 php artisan serve (或等效命令) 运行服务器并测试预设。

配置

此包包含的默认 tailwind.config.js 配置文件简单地使用了 Tailwind 供应商文件的配置。如果您想进行更改,您应该删除该文件并运行 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 分页。如果您想在您的应用中使用这些视图,可以参考 文档

截图

Welcome

Register

Login

Reset Password

Dashboard

Verify