使用 IceStack 来构建你的 Css UI 吧
内容提要
作者因 daisyui 难以深度定制 CSS UI 组件，开发了基于 tailwindcss 并受 daisyui 启发的生成管理工具 @icestack/ui。安装后执行 init 生成配置，build 输出产物，再通过 icestackPlugin 接入 tailwindcss 即可使用内置预设组件；也可将 mode 设为 none 从零构建，并用 schema 参数扩展颜色、尺寸等样式，实现自定义 UI 框架。
延伸解读
从 daisyui 到 icestack：定制化需求的驱动
作者因 daisyui 在深度定制 CSS UI 组件时遇到困难，才开发了 @icestack/ui。这提醒我们，选择 UI 框架时需评估项目的定制需求。如果现有工具无法满足，自建生成工具可能是一种出路，但也要考虑维护成本。
接入流程：三步集成到 tailwindcss
使用 @icestack/ui 需先安装包，执行 init 生成配置，再 build 输出产物，最后在 tailwind.config.js 中注册 icestackPlugin 并指定 loadDirectory。注意 loadConfig 设为 true 时，预设颜色才会进入 tailwind 主题，否则无法使用 bg-primary 等类。
两种构建模式：预设与从零开始
默认加载 @icestack/preset-default 预设，提供类似 daisyui 的组件；若想完全自定义，可将 mode 设为 none，从零构建。这适合需要独特设计系统的项目，但意味着所有组件都需自行定义，工作量较大。
通过 schema 扩展颜色与尺寸
schema 函数接收 selector、params、types 等参数，可返回 base、styled、utils 等 CSS 模板。示例中通过添加 btn-red 等类扩展颜色，通过 btn-xs 等类扩展尺寸。这种模式让组件样式可编程生成，便于统一管理变体。
Q&A
IceStack 是什么？它和 tailwindcss、daisyui 有什么关系？
IceStack 是一个 Css UI 框架的生成和管理工具，基于 tailwindcss 并受 daisyui 启发。它可以帮助你轻松扩展样式，或从零构建自己的 Css UI 并结合 tailwindcss 使用。
如何安装和初始化 IceStack？
使用 npm 安装开发依赖：npm install -D @icestack/ui @icestack/tailwindcss。安装后会注册 icestack 命令。然后执行 npx icestack init 生成 icestack.config.cjs 配置文件。
IceStack 构建后如何集成到 tailwindcss 中？
执行 npx icestack build 生成产物到配置的 outdir 目录（如 './my-ui'）。然后在 tailwind.config.js 中注册 icestackPlugin 插件，传入 loadDirectory 参数指向产物目录，并可设置 loadConfig 为 true 以注入主题颜色。
IceStack 默认提供哪些预设组件？如何覆盖或扩展它们？
默认内置 @icestack/preset-default 预设，吸收了 daisyui 的优秀写法。你可以通过配置项 override 对原有样式进行扩展和覆盖。
如何从零开始用 IceStack 构建自己的 UI 框架？
在 icestack.config.cjs 中将 mode 设置为 none，这样不会加载默认预设。然后可以在 components 中定义自己的组件，通过 schema 函数返回样式模板，使用 @apply 编写 CSS。
在 IceStack 中如何为按钮组件添加多种颜色和尺寸？
在组件的 schema 函数中，通过 defaults 的 styled 字段添加颜色变体（如 .btn-red），通过 utils 字段添加尺寸变体（如 .btn-xs）。构建后即可使用如 btn-red、btn-lg 等类名。
