tweakcn

tweakcn 是一个专注于为shadcn/ui 组件库提供个性化主题定制的在线工具。它允许开发者和设计师通过直观的用户界面，实时预览并生成适用于 Tailwind CSS 的样式代码，从而快速实现组件外观的定制化。该平台无需注册即可使用，完全免费且开源，是前端开发者的理想辅助工具。

核心定位：

目标用户群体：前端开发者、UI/UX 设计师、Tailwind CSS 用户。

核心功能：提供 shadcn/ui 组件的主题定制服务。

技术基础：基于 Tailwind CSS(支持 v3 和 v4)，支持多种颜色格式(如 OKLCH、HSL)。

平台性质：Web 在线工具，无需安装，开箱即用。

产品功能
1.主题预设选择

提供多个精美的主题模板供用户一键应用。

支持自定义 Light Mode 与 Dark Mode 颜色方案。

可根据项目风格快速切换不同主题风格。

2.可视化定制工具

颜色控制：

支持背景色、文字颜色、边框颜色的自定义。

内置直观的颜色选择器，便于精确调整。

字体设置：

可调节字体大小(font-size)、字重(font-weight)、文本转换(text-transform)等。

支持多种字体风格的组合搭配。

Tailwind 属性控制：

支持 Radius(圆角)、Spacing(间距)、Shadows(阴影)等 Tailwind 样式属性的微调。

实时预览效果，确保所见即所得。

3.Tailwind 版本兼容性

支持 Tailwind CSS v3 与 v4 的自由切换。

支持现代颜色格式如 OKLCH 和 HSL，提升设计灵活性与视觉表现力。

4.对比度检测工具

内置对比度检查器，帮助用户确保文字与背景之间的可访问性符合标准(WCAG)。

对于注重无障碍设计的项目尤为重要。

5.代码导出与集成

定制完成后可一键复制 Tailwind CSS 代码。

直接粘贴至项目中即可生效，极大提升开发效率。

产品特色
1.无需登录，即开即用

所有功能均可在未登录状态下使用。

极大地降低了用户上手门槛，适合快速原型设计或临时修改需求。

2.实时预览机制

所有更改均在页面中实时反映，避免反复调试。

支持多组件同步预览，方便全局风格统一。

3.高度可定制性

涵盖颜色、字体、布局、间距等多个维度。

支持 Tailwind 原生属性的深度定制，满足专业级设计需求。

4.跨版本兼容 Tailwind

同时支持 Tailwind v3 与 v4，适应不同项目的技术栈。

方便开发者在不同项目之间迁移或维护。

5.响应式与可访问性优化

对比度检测器确保设计符合无障碍标准。

有助于构建更具包容性的网页应用。

收费价格
截至目前，tweakcn 仍处于完全免费状态，所有核心功能均可无限制使用，无需付费订阅或购买许可证。这使得它成为许多中小型团队和独立开发者的首选工具。

常见问题解答(FAQ)
Q1:是否需要注册才能使用?

A: 不需要。tweakcn 支持免登录使用，所有核心功能均可直接访问。

Q2:是否支持 Tailwind CSS 的最新版本?

A: 是的，tweakcn 支持 Tailwind v4，并可切换回 v3，以适配不同项目需求。

Q3:能否将定制好的主题导出为文件?

A: 当前仅支持复制 Tailwind CSS 代码片段。未来可能支持导出为 JSON 或 CSS 文件。

Q4:是否支持 Dark Mode 主题定制?

A: 是的，tweakcn 支持 Light/Dark 模式的双模式定制，并可分别设置每种模式下的颜色方案。

Q5:如何确保设计的可访问性?

A: 平台内置了对比度检测器，可自动分析文字与背景之间的对比度，确保符合无障碍设计标准。

Q6:是否有 API 接口可供调用?

A: 目前暂未提供公开 API。如需集成或自动化流程，建议关注后续更新或提交功能请求。

Q7:是否支持中文界面?

A: 当前界面默认为英文，但因其开源特性，社区可贡献翻译版本。