@ caratlogic/ 设计系统
克拉通逻辑共享 React 组件库(Tailwind CSS v4 + shadcn/ui).
安装
npm install @caratlogic/design-system
同伴依赖性 : react, (中文(简体) ), react-dom, (中文(简体) ), react-router-dom。 。 。 .
尾风 CSS 设置(生产建设所需)
组件使用 Tailwind 工具类. 没有这个,Dev可能看起来很好,但是生产构建会降低大多数DS样式,除非您将软件包注册为 Tailwind 内容源.
在您应用程序的主要 CSS 文件( 如 . src/index.css, (中文(简体) ), 之后 @import "tailwindcss"数字 :
@import "tailwindcss";
@import "@caratlogic/design-system/source.css";
source.css 让Tailwind扫描已公布的JS捆包,以获得班名. 没有它,按钮,侧边栏,表格,以及其他DS组件在生产中会变形.
您的应用程序还必须定义主题符号( Y):root 编号 : @theme 变量)。 从 src/styles/index.css 如果已经对齐,则在此重播或保留您现有的应用程序主题.
不要依赖运行时间 CSS 注射
旧建筑通过 JS 捆绑注入了部分 Tailwind 样式表 styleInject。从v.0.0.2开始删除——主机应用程序是编译公用事业的单一来源.
使用量
import { Button, Sidebar, SidebarProvider } from '@caratlogic/design-system';
import { Input } from '@caratlogic/design-system/ui';
软件包出口
| 导入 | 说明 |
|---|---|
@caratlogic/design-system | 原子、分子、生物、布局 |
@caratlogic/design-system/ui | 原始原始的原始阴影/ ui |
@caratlogic/design-system/source.css | 尾风 @source 对主机应用程序的指令 |
发展
yarn install
yarn build
yarn test