Pines：一个基于 Alpine.js 和 Tailwind CSS 的开源 UI 组件库

在开发后台管理系统或者一些简单的 Web 页面时，经常需要用到下拉菜单、选项卡、手风琴、弹窗等 UI 组件。如果不想引入一整套前端组件库，也可以考虑使用 Pines。

Pines 是一个开源的 UI 组件库，主要使用 Alpine.js 处理交互，使用 Tailwind CSS 编写样式。它提供了一些可以直接复制到项目中的 HTML 组件代码，不需要像常见的组件库那样安装专门的组件包。

项目地址：

• 官网：https://devdojo.com/pines
• GitHub：https://github.com/thedevdojo/pines

Pines 是什么？

Pines 的定位比较简单，就是提供一组基于 Alpine.js 和 Tailwind CSS 的 UI 组件。

例如，页面需要一个下拉菜单，传统做法可能是引入 Vue、React 等框架，再使用对应的组件库。对于一些简单的页面来说，这样做未必有必要。

如果项目本身已经使用 Tailwind CSS，那么可以直接复制 Pines 提供的组件代码，再根据自己的需求修改。

Pines 的组件代码主要由 HTML、Tailwind CSS 类名和 Alpine.js 指令组成。组件的结构、样式和交互逻辑都可以直接看到，后续修改也比较方便。

使用了哪些技术？

Pines 主要依赖两个技术。

1. Alpine.js

Alpine.js 是一个轻量级的 JavaScript 框架，可以直接在 HTML 中编写交互逻辑。

比如，下面是一个简单的下拉菜单：

<div x-data="{ open: false }" class="relative">
    <button
        type="button"
        @click="open = !open"
        class="rounded bg-blue-600 px-4 py-2 text-white"
    >
        打开菜单
    </button>

    <div
        x-show="open"
        @click.outside="open = false"
        class="absolute left-0 mt-2 rounded border bg-white p-3 shadow"
    >
        <a href="#" class="block p-2">菜单一</a>
        <a href="#" class="block p-2">菜单二</a>
    </div>
</div>

这里的 x-data 用于定义组件状态，@click 用于处理点击事件，x-show 根据状态控制菜单的显示和隐藏。

不需要为这个简单的交互单独创建一个 JavaScript 文件，也不需要使用 Vue 或 React。

2. Tailwind CSS

Tailwind CSS 通过工具类编写样式。例如：

<button class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
    按钮
</button>

这里的 rounded、bg-blue-600、px-4 等都是 Tailwind CSS 的工具类。

Pines 将这些样式类与 Alpine.js 的交互逻辑组合起来，形成可以直接使用的 UI 组件。

如果需要调整按钮颜色、间距或者圆角，可以直接修改对应的类名。

Pines 有哪些组件？

Pines 提供了多种常见的页面组件，具体可以查看官网中的组件列表。

比较常用的类型包括：

• 基础交互组件： 按钮、下拉菜单、弹窗、手风琴等。
• 页面展示组件： 面包屑、卡片、选项卡等。
• 其他交互组件： 日期选择器、视频播放器等。

这些组件可以根据实际需要单独使用，不需要一次性引入整个库。

需要注意的是，具体组件及其实现方式应以项目当前版本为准。

如何使用 Pines？

Pines 的使用方式与 npm 安装组件库有所不同，主要是复制组件代码到自己的项目中。

1. 选择需要的组件

先打开 Pines 官网，找到需要的组件，查看对应的 HTML 代码。

例如，项目需要一个下拉菜单，就直接找到下拉菜单组件，不必引入其他用不到的组件。

2. 复制代码到项目

将组件代码复制到自己的 HTML 页面中，然后根据实际需求修改文字、颜色、尺寸和交互逻辑。

如果项目已经使用 Alpine.js 和 Tailwind CSS，一般不需要再为每个组件安装额外的依赖。

如果项目还没有引入这两个库，则需要先完成相应的配置。

3. 配置 Alpine.js 和 Tailwind CSS

如果只是想快速测试，可以参考项目文档使用 CDN。

但如果是正式项目，不建议直接依赖 Tailwind CSS 的 CDN 方式来处理完整的生产环境样式。更合适的做法是将 Tailwind CSS 接入项目原有的构建流程，并按需生成样式文件。

Alpine.js 也可以通过项目的包管理器安装，或者按照官方文档配置。

相关文档：

• Alpine.js：https://alpinejs.dev/start-here
• Tailwind CSS：https://tailwindcss.com/docs/installation
• Pines GitHub：https://github.com/thedevdojo/pines

4. 根据项目调整组件

复制过来的代码并不意味着完全不需要修改。

实际开发时，通常还需要调整以下内容：

• 修改颜色、间距和尺寸，使组件与现有页面保持一致。
• 检查菜单、弹窗等组件的交互是否符合实际需求。
• 测试移动端布局和键盘操作。
• 检查组件依赖的 JavaScript 和 CSS 是否已经正确加载。

如果需要把组件用于多个页面，也可以将公共代码整理成自己的模板或组件，避免重复维护。

Pines 适合什么项目？

如果项目使用的是 Laravel、普通 HTML 页面，或者其他能够输出 HTML 的后端框架，Pines 都可以作为一个 UI 组件参考。

例如：

• 后台管理系统中的菜单、弹窗和选项卡。
• 企业官网或产品介绍页面中的交互组件。
• 使用 Tailwind CSS 开发的轻量级 Web 应用。
• 不希望额外引入大型前端框架的简单页面。

不过，如果项目本身已经使用 Vue 或 React，并且需要大量复杂交互、统一的组件 API、表单校验等功能，那么还是应该根据项目情况选择合适的组件方案。Pines 并不是用来替代所有前端组件库的。

总结

Pines 是一个基于 Alpine.js 和 Tailwind CSS 的开源 UI 组件库，主要特点是可以直接复制组件代码，不需要额外安装一整套组件包。

如果项目已经在使用 Tailwind CSS，或者只需要给普通 HTML 页面添加一些简单交互，可以看看 Pines 提供的组件。

它的使用方式比较直接，组件代码也容易修改。不过，正式使用前还是需要检查组件依赖、样式构建和交互逻辑，不能简单地复制代码后就认为已经完成了开发。

项目地址：https://github.com/thedevdojo/pines