zamblas/tailwindcss

Laravel前端预设Tailwind CSS

维护者

详细信息

github.com/zamblas/tailwindcss

源代码

安装: 2

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 141

语言:Blade

4.3.2 2022-06-30 22:06 UTC

README

这是一个为Tailwind CSS(一个以实用工具为第一优先的CSS框架,用于快速UI开发)提供的Laravel前端脚手架预设。

用法

  1. 安装Laravel >= 9.0 并将cd切换到您的应用目录。
  2. 使用composer require zamblas/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中清理重复的认证条目)
  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