fuxsto-design

fuxsto-design

Monochrome zinc, Tailwind CSS v4 component library for Vue 3.

单色 zinc 设计语言 · 78 个组件 · 全量 TypeScript · 暗色模式开箱即用。

特性

• 样式自包含：库自己编译全部样式，消费方永远不需要为本库配置 @source、safelist 或任何 Tailwind 扫描规则。
• 两条 CSS 搞定一切：@import "tailwindcss"; @import "fuxsto-design/styles";
• 按需引入：每个组件都有独立子路径入口，天然 tree-shaking。
• 无障碍：表单控件原生化（键盘完全可用）、浮层焦点陷阱、状态组件 live region。
• 暗色模式：系统偏好 + 显式 .dark 类双触发，令牌单一定义。

安装

npm install fuxsto-design

Peer 依赖：vue ^3.5.0、tailwindcss ^4.0.0、lucide-vue-next ^0.577.0。

使用

// 1. 引入样式（全局 CSS 文件，两条）
// @import "tailwindcss";
// @import "fuxsto-design/styles";

// 2. 使用组件
import { Button, Input, Dialog } from 'fuxsto-design'
// 或按需子路径导入（独立 chunk，最优 tree-shaking）
import Button from 'fuxsto-design/button'

<template>
  <Button variant="primary">确认</Button>
  <Input v-model="name" placeholder="输入名称" clearable />
</template>

组件分组

Tip: 1.0.1 删除滑块刻度指示 1.0.2 修复滑块在手机端的拖动间歇性失效 1.0.3 修复 message 样式异常 1.0.4 修复 Carousel 移动端无法拖动的问题