开发工具精选项目

TweakCN

面向 shadcn/ui 与 Tailwind CSS 的可视化主题编辑器，可实时调整设计令牌并导出 CSS 或 Registry 命令。

GitHub 访问官网

主要语言TypeScript

开源许可Apache-2.0

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

TweakCN 帮助开发者从预设主题开始，以可视化方式调整颜色、字体、圆角、间距和阴影，并预览 shadcn/ui 组件效果。它支持 Tailwind CSS v3/v4、明暗模式、CSS 导入和 shadcn Registry 导出。

TweakCN 是一个面向 shadcn/ui 的可视化主题编辑器，而不是新的组件库。它把 shadcn/ui 常用的 CSS Variables 与 Tailwind 主题配置映射为图形化控件，让开发者从预设或现有 CSS 开始，同时编辑浅色与深色主题，并在按钮、卡片、表单、图表和侧栏等示例中实时预览。完成后可以复制 Tailwind v3/v4 代码，或通过 shadcn Registry 命令把主题应用到项目。项目源码采用 Apache-2.0；核心编辑和导出功能免费，AI 生成、云端保存数量与支持等级则存在免费额度和 Pro 分层。

核心定位shadcn/ui 主题编辑器

Tailwind 支持v3 / v4

输出方式CSS / shadcn Registry

FEATURES

主要特点

TweakCN 围绕设计令牌的导入、可视化调整、真实组件预览与可复制输出组成完整工作流。

可视化颜色控制

通过颜色选择器调整背景、前景、卡片、主色、强调色、边框、输入框、图表与侧栏等语义 Token。

浅色与深色主题

分别编辑 :root 与 .dark 变量，并在预览中切换模式，避免只完成单一配色后再手工补齐另一套。

字体与排版设置

可选择 Sans、Serif 和 Mono 字体，并调整字距；导出时会生成相应字体变量和 Next.js 布局参考。

圆角、间距与阴影

除颜色外还能细调 Radius、Spacing、阴影颜色、透明度、模糊、扩散和偏移，形成更完整的视觉语言。

Tailwind CSS v3 与 v4

可在 v3 与 v4 输出之间切换，分别生成 tailwind.config 配置或 @theme inline 等现代 CSS。

多种颜色格式

支持 OKLCH、HSL 等颜色格式，并根据 Tailwind 版本限制可用格式，方便迁移旧主题或采用感知均匀色彩。

主题预设库

可以从预制主题开始，再修改品牌色、字体与表面风格，比从空白 Token 表逐项设计更快。

真实组件预览

在组件、卡片、营销页面和应用示例中查看主题效果，比只观察色板更容易发现层级、状态和可读性问题。

导入现有 CSS

支持粘贴现有 CSS Variables 作为编辑起点，适合已有 shadcn/ui 项目，而不必重新手工录入全部 Token。

代码与 Registry 导出

可复制 index.css、Tailwind v3 配置、Next.js 字体布局代码，保存主题后还可获得 shadcn Registry 安装命令。

对比度检查

内置对比度检查帮助发现前景与背景组合的问题，为 WCAG 审核提供早期提示。

网站实时预览

项目提供 live-preview 脚本，可把本地或外部网站加载到编辑器，在真实页面上观察主题变化。

保存、分享与社区主题

登录后可保存和分享主题，也能浏览社区主题；免费账户与 Pro 账户的保存数量不同。

AI 主题生成

可通过文字提示生成主题，Pro 还提供从图片生成和更高额度；AI 结果仍需人工检查品牌与可访问性。

可自托管源码

官方仓库公开完整 Next.js 应用源码并采用 Apache-2.0，团队可以研究实现或按自身需求部署。

USE CASES

适用场景

当团队已经使用 shadcn/ui 或兼容的 CSS Variables，并希望快速形成差异化主题时，TweakCN 最有价值。

为 shadcn/ui 建立品牌主题

把默认中性色替换为品牌色、字体、圆角和阴影，同时保留 shadcn/ui 的组件结构与语义变量。

从 Tailwind v3 迁移到 v4

对照生成的 v3 配置和 v4 CSS，理解 Token 如何映射到 @theme inline，再逐步迁移现有项目。

快速制作产品原型

先选择预设并完成少量调整，即可让内部工具、演示产品或 MVP 获得较一致的视觉方向。

设计与开发协作

设计人员通过视觉控件探索方案，开发人员直接审查 CSS Variables 和 Registry 输出，减少 Token 转录。

修复明暗模式一致性

并排检查两种模式中的卡片、表单、图表与侧栏，发现只修改主色却遗漏语义前景色的问题。

审查主题可访问性

利用对比度检查筛出明显不合格的颜色组合，再配合键盘、焦点和屏幕阅读器完成完整审核。

为多个项目共享主题

将确认后的主题保存并通过 Registry URL 分发，适合使用相同 shadcn/ui Token 约定的内部项目。

在真实页面中试色

临时加入 live-preview 脚本，把已有网站载入编辑器，避免示例组件表现良好但真实业务页面失衡。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

TweakCN 擅长的地方

把大量 CSS Variables 转换为直观控件，降低主题试验成本
同时支持 Tailwind CSS v3 与 v4，适合新项目和迁移期项目
覆盖颜色、字体、圆角、间距与阴影，不只是一组配色生成器
可以导入已有 CSS，适合在现有项目上继续调整
组件、卡片、营销和应用预览比单纯色板更接近真实界面
支持复制 CSS 与 shadcn Registry 命令，交付方式灵活
浅色、深色、图表和侧栏 Token 覆盖较完整
内置对比度检查，有助于提前发现可读性问题
公开仓库采用 Apache-2.0，便于审计、贡献和自托管
可保存与分享主题，让设计方案更容易复用和讨论

需要注意

采用前应考虑的问题

它不是组件库

TweakCN 不会补齐 Dialog、Table 或 Carousel 等组件能力；它主要修改 shadcn/ui 兼容的主题变量和样式配置。

应用 Registry 前先保存改动

shadcn add 可能更新全局 CSS 与现有主题变量。应先提交或备份 globals.css，再审查实际 Diff。

自定义组件未必完全响应主题

硬编码颜色、内联样式或没有使用语义 Token 的组件不会自动适配，仍需逐个清理和测试。

预设不能替代品牌设计

直接采用热门主题容易产生同质化界面，应继续调整字体、排版密度、图形语言与内容层级。

对比度检查不是完整无障碍审核

颜色比例合格不代表组件可访问；还需验证焦点、键盘、错误状态、禁用状态、运动和屏幕阅读器体验。

Tailwind v3 与 v4 输出不同

v3 通常还需要 tailwind.config，v4 则使用 CSS-first 配置。不要把两套代码同时无差别粘贴到项目。

字体需要正确加载

选择字体并生成变量并不会自动解决授权、字体文件、Google Fonts 网络请求或 Next.js 字体加载策略。

AI 结果必须人工校验

提示词或图片生成的主题可能出现低对比度、过多强调色或不符合品牌规范，不能直接作为生产结论。

免费与 Pro 能力存在配额

核心编辑和导出免费，但 AI 次数、保存主题数量、图片生成和支持等级会受当前账户方案影响，使用前应查看最新定价。

实时预览会加载远程脚本

live-preview.min.js 来自 tweakcn.com。只应在可信开发环境临时使用，评估内容安全策略、跨域和隐私后再决定是否保留。

不要把敏感页面交给外部预览

含客户数据、内部后台或认证信息的页面不应未经安全评估加载到第三方编辑器或开放跨域主题注入。

共享 URL 也需要版本治理

Registry URL 很方便，但团队仍应把最终 CSS 纳入源码、记录来源与导入时间，避免远端内容变化造成不可追踪更新。

自托管不是零成本

官方应用包含认证、数据库、AI、支付、分析和云端存储集成；只想编辑主题时，维护完整平台可能过重。

QUICK START

快速开始

可以直接使用官方预设 Registry，也可以在在线编辑器中调整后复制生成的 CSS；下面同时给出实时预览和自托管方式。

1初始化一个 shadcn/ui 项目

bash

npx shadcn@latest init

# 提交或备份当前 globals.css，再应用任何外部主题

2安装一个已验证的官方预设

bash

npx shadcn@latest add https://tweakcn.com/r/themes/cyberpunk.json

# 检查 globals.css 和字体相关改动后再接受

3Tailwind v4 主题结构示例

css

@import "tailwindcss";
@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.55 0.22 265);
  --primary-foreground: oklch(0.985 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.72 0.16 265);
  --primary-foreground: oklch(0.16 0.03 265);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --radius-lg: var(--radius);
}

4导入并继续编辑现有主题

css

/* 在 TweakCN 的 Import 面板粘贴项目现有变量 */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --ring: oklch(0.556 0 0);
}

5可选：在 Vite 项目中启用实时预览

html

<!-- index.html：仅在可信开发环境临时加入 -->
<head>
  <script
    crossorigin="anonymous"
    src="https://tweakcn.com/live-preview.min.js"
  ></script>
</head>

6可选：本地运行 TweakCN

bash

git clone https://github.com/jnsahaj/tweakcn.git
cd tweakcn
npm install
npm run dev

# 浏览器打开 http://localhost:3000

7应用主题后的检查

bash

npm run lint
npm run typecheck
npm run build

# 检查浅色/深色、焦点、表单、图表、侧栏和移动端

下一步：先提交当前 globals.css，再应用 Registry 或粘贴生成代码，这样可以清楚审查被替换的变量；对生产项目不要直接覆盖未经确认的品牌 Token。

ALTERNATIVES

类似项目

这些项目分别提供 TweakCN 所依赖或可协同使用的组件、样式系统和主题能力。

shadcn/ui

把可访问、可组合的组件源码直接加入项目，由团队完整拥有和定制的 UI 分发平台。

查看项目

Tailwind CSS

以实用类为核心的 CSS 框架，快速构建定制化界面。

查看项目

daisyUI

基于 Tailwind CSS 的纯 CSS 组件库，以语义化类名、丰富组件和多主题系统加速界面开发。

查看项目

Panda CSS

面向设计系统、在构建时提取样式的类型安全 CSS-in-JS 框架。

查看项目

Magic UI

面向 React 与 Tailwind CSS 的开源动画组件集合，通过 shadcn Registry 将可编辑源码复制到项目中。

查看项目

Aceternity UI

面向 React、Next.js、Tailwind CSS 与 Motion 的动画组件和页面素材集合，通过 shadcn Registry 复制源码。

查看项目

shadcn/create

shadcn/ui 官方项目生成器，用于选择样式、基础组件与工程配置；与 TweakCN 的深度主题调整形成互补。

访问官网

Shadcn Theme Editor

可作为开发依赖或复制源码嵌入项目的轻量主题编辑器，适合希望直接在应用内部调色的团队。

访问官网

COMPARISON

TweakCN vs daisyUI

TweakCN 与 daisyUI 都能降低 Tailwind 项目的主题定制成本，但两者处在不同层级。TweakCN 是编辑与导出 shadcn/ui 设计令牌的工具，不增加新的运行时组件类；daisyUI 是 Tailwind 插件和组件类库，直接提供 btn、card、modal 等语义类以及多套主题。

比较维度	TweakCN	daisyUI
核心定位	shadcn/ui 可视化主题编辑器	Tailwind CSS 组件类库与主题系统
交付内容	CSS Variables、Tailwind 配置和 Registry 主题	Tailwind 插件、组件类和内置主题
组件来源	继续使用项目中的 shadcn/ui 组件源码	使用 daisyUI 提供的语义组件类
编辑体验	图形化控件、实时组件预览和 CSS 导入	主要通过 CSS 配置主题，可配合 Theme Generator
Tailwind 版本	同时生成 v3 与 v4 输出	当前版本围绕 Tailwind CSS 插件体系
颜色格式	可选择 OKLCH、HSL 等输出	主题系统主要使用 OKLCH Token
运行时影响	生成结果进入项目，编辑器本身不必成为生产依赖	daisyUI 插件参与项目样式生成
组件定制	依赖 shadcn/ui 的源码所有权，可直接改组件	以类名、主题变量和插件配置为主要定制面
主题分发	CSS、分享链接和 shadcn Registry URL	daisyUI Theme CSS 与插件配置
许可	Apache-2.0	MIT
更适合	已经采用 shadcn/ui、需要品牌化 Token 的 React 团队	希望快速使用语义组件类和大量现成主题的多框架团队

如何选择

如果项目已经使用 shadcn/ui，并希望保留组件源码控制权同时快速形成独特主题，选择 TweakCN；如果更需要一套直接可用的组件类、丰富内置主题，并希望跨 React、Vue 或纯 HTML 使用，优先评估 daisyUI。它们并非完全互斥，但同时引入两套主题约定会增加 Token 映射和样式优先级成本。

VERIFICATION