@codaco/fresco-ui (英语)
Fresco UI组件,风格,以及公用事业. 见 docs/superpowers/specs/2026-04-29-fresco-ui-package-design.md 用于设计规格和 docs/superpowers/plans/2026-04-29-fresco-ui-package.md 实施计划.
安装
pnpm add @codaco/fresco-ui
同伴依赖关系 (你很可能已经拥有这些):
{
"@base-ui/react": "^1.4.0",
"@codaco/shared-consts": "5.0.0",
"@codaco/tailwind-config": "^1.0.0-alpha.11",
"immer": "^11.1.4",
"motion": "^12.38.0",
"react": "^19.2.5",
"react-dom": "^19.2.5",
"tailwindcss": "^4.2.4",
"zod": "^4.1.13",
"zustand": "^5.0.12",
}
尾风/ CSS 设置
软件包假定主机有一个有线的 Tailwind v4 构建插件
(单位:千美元)@tailwindcss/vite 对于维特, @tailwindcss/postcss 用于下一个.js/ 任意
(原始内容存档于2019-10-29). PostCSS protect. 链条中的每个CSS文件都有一个关切
消费者按下列顺序进口:
/* styles/globals.css */
@import '@codaco/tailwind-config/fresco.css'; /* Tailwind v4 + theme + plugins + fonts */
@import '@codaco/fresco-ui/styles.css'; /* @source for fresco-ui's dist */
如果您还使用了 @codaco/interview,也添加其 CSS 文件——参见
软件包的读取器 :
@import '@codaco/interview/styles.css';
也别 @import "tailwindcss" 你自己来. 那个进口活人
内部 @codaco/tailwind-config/fresco.css; 再次加载
尾风运行两次,产生重复/相冲突
公用事业.
@codaco/fresco-ui/styles.css 其唯一内容
是一个单 @source "./**/*.{js,ts,tsx}" 告诉
Tailwind v4的班级扫描仪 以行走包的编译 JS在
dist/ 因此它会发出工具类 组件参考。 这个
已经 没有 再出口设计系统基础,所以
tailwind-config 导入不是可选的.
@codaco/tailwind-config/fresco.css 捆绑默认值并访问
主题变体以及自办的Nunito和包容性桑斯
woff2 文档 .
访谈主题由 data-theme-interview 属性。 主机通常通过 <ThemedRegion theme="interview"> 组件(从 @codaco/fresco-ui/ThemedRegion)),它也会连接 a <PortalContainerProvider> 因此,对话框、弹出器、下拉、工具提示、土司、选择和组合框门户进入了主题子树内的节点(因此继承主题的 CSS 变量)而不是进入 document.body。 。 。 .
包含块限制 : 页:1 <ThemedRegion> 元素及其先辈 <body> 一定没有 transform, (中文(简体) ), filter, (中文(简体) ), perspective,或 contain 设置。 其中任何一种都会为固定位置的后人制造出一个新的包含区块,从而会打破模式/流行定位. 如果您无法满足此限制, 请重新申请 data-theme-interview 树上较高(例如:. <body>) (中文(简体) ).
公共 API 表面
这个 exports 输入 package.json 是一个明确的许可列表。 在传输新模块时添加新条目 。 内部(收集/储存、按键针等)被故意排除在外——任何未列于 exports 即使Vite将其编译成 dist。 。 。 .