Laravel 开发者想要现成的 Blade 组件,又希望用 Tailwind 统一风格,往往要在两者之间自己搭桥:把 Tailwind 类塞进组件、再处理发布与依赖。想要一套“composer 一装、Blade 直接用”的方案并不现成。
BladewindUI 的切入点,是做一套面向 Laravel Blade、基于 Tailwind 的开源 UI 组件库,用 composer 安装、模块化引入,让 Blade 模板直接调用组件。

项目基本信息

信息项详情
项目名称ui
GitHub地址https://github.com/bladewindui/ui
项目描述为 Laravel Blade 打造、基于 Tailwind 的开源 UI 组件库
作者bladewindui
开源协议MIT License
开源状态公开
LanguagesJavaScript
支持平台Web
最后更新—

一、项目介绍

bladewindui/ui 是一个开源的 Laravel Blade UI 组件库,MIT 协议,构建在 Tailwind CSS 之上。它通过 composer 安装,并按功能拆成模块(如 forms、content、navigation),提供卡片、表格、模态、日期选择等组件,直接在 Blade 模板以 <x-bladewind.*> 形式调用,适合 Laravel 快速搭一致界面。

二、核心优势

  1. Blade 原生:组件以 Blade 标签直接调用。
  2. Tailwind 底座:风格统一、易定制。
  3. composer 安装:依赖管理简单。
  4. 模块化:按 forms/content/navigation 等分组按需引入。
  5. Laravel 友好:贴合 Laravel 项目结构。

三、适用场景

  • Laravel 应用与后台。
  • 想用 Tailwind 又不想手写组件。
  • 需要卡片/表格/模态等常用件。
  • Blade 模板为主的团队。

四、安装教程

用 composer 安装并初始化:

composer require bladewindui/ui
php artisan bladewind:install

可按需装子模块,如 composer require bladewindui/table。常见报错:未跑 bladewind:install 会导致资源未发布;Tailwind 未配置会让组件无样式。

五、使用示例

在 Blade 模板直接使用组件:

<x-bladewind.card title='统计'>
  今日新增 128 位用户
</x-bladewind.card>

真实效果:卡片、表格、模态等获得 Tailwind 风格的统一外观,Blade 中零胶水调用。

六、常见问题

Q:必须 Laravel 吗?
A:是的,组件以 Blade 标签形式提供,面向 Laravel。
Q:必须 Tailwind 吗?
A:组件基于 Tailwind 构建,需要 Tailwind 环境。
Q:免费商用吗?
A:MIT 协议,可免费用于商业 Laravel 项目。

七、总结

BladewindUI 把 Tailwind 的观感与 Laravel Blade 的便利性结合,用 composer 一装即用的方式降低了 Laravel 界面搭建成本。对 Blade 为主、又想要统一 Tailwind 风格的团队,它是开箱即用的组件来源;MIT 协议。