Claude Code typography-colors for Tiptap prose
Choose semantic Tailwind colors for paragraphs, titles, callouts, and links inside an editor.
中文Install in Claude Code
Open Writeme or a Tiptap project with the same typography tokens in Claude Code, then check the Tailwind definitions.
- Review `.claude/skills/typography-colors/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/typography-colors/` in your project and save the reviewed file as `.claude/skills/typography-colors/SKILL.md`.
- Start Claude Code from that project's root, then select `/typography-colors` in the slash menu.
Example task
In text-22 the editor content has a “Workshop notes” heading and a warning callout. Its Save button belongs to the toolbar.What to check
Use {heading: 'text-typography-title', warning: 'bg-typography-callout-warn'}. Keep existing toolbar styling for the Save button.
Original SKILL.md on GitHub · Updated
Frequently asked question
Should the toolbar use typography colors too?
These classes style rendered editorial content. Toolbars, menus, and buttons use the project’s UI component colors.