词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code typography-colors：给 Tiptap 正文应用语义色

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/typography-colors/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/typography-colors/`，把核对后的文件保存为 `.claude/skills/typography-colors/SKILL.md`。
  3. 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/typography-colors`。

中文摘要

在编辑器内容中按段落、标题、提示块和链接的不同角色选择 Tailwind 颜色变量。

SKILL.md 中文导读

可复现示例

内容样例 text-22 包含标题“Workshop notes”和一个警示提示。旁边的保存按钮属于编辑器工具栏。

工作步骤

  1. 把待修改元素划分为文章内容角色或界面控件。
  2. 按角色及状态选类名，核对类名在主题配置中能解析。

验收方法

样式方案记录 {heading: 'text-typography-title', warning: 'bg-typography-callout-warn'}。保存按钮继续使用现有工具栏样式。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 中打开 Writeme 或已有相同 typography 颜色命名的 Tiptap 项目，再核对 Tailwind 变量定义。

常见问题

工具栏也应该使用 typography 颜色吗？

这些类服务于编辑器渲染的文章内容。工具栏、菜单和按钮使用项目已有的界面组件颜色。

相关指南