Why should I use this instead of manually setting font sizes in my CSS?

This skill automates the transition from messy, manual font sizes to a mathematically consistent scale. It sets a single base size and ratio that automatically generates every Tailwind class from text-xs to text-9xl, ensuring professional vertical rhythm across your entire project.

Does this work with Tailwind CSS v3 projects?

This skill is built specifically for Tailwind CSS v4 and utilizes the new @theme directive and CSS variables. If the skill detects an older v3 configuration (tailwind.config.js), it will notify you and stop to prevent incompatible code from being written.

Will this automatically remove my existing manual font-size classes?

Yes, before applying any changes, the skill scans your HTML, JSX, Vue, and Astro files for hardcoded text and leading classes. It provides a detailed list of these conflicts, allowing you to approve, skip, or manually address overrides that would otherwise break your new scale.

Which AI agents are compatible with the Tailwind Type Scale Generator?

The skill is designed to work with AI agents that have file-system access, such as Claude Code. It requires the ability to read your @theme blocks and scan your component files to map the scale correctly.

Can this skill help me document my design system?

Beyond updating your CSS, the skill can automatically sync your new type scale to your project's DESIGN.md file. This ensures your documentation stays perfectly aligned with your actual implementation for other team members to follow.

Tailwind Type Scale Generator

Example session with this skill installed

Apply a Perfect Fourth type scale at a 16px base to this project.

Read your context and instructions
Compiled the tailwind type scale
Generated the UI component

Current project state

Target CSS: src/style.css
DESIGN.md: not found
tailwind.config.js: not found (v4 confirmed)
Existing --text-* variables: none found

Type Scale Preview

Config: base 16px x Perfect Fourth (1.333)

Tailwind class	Size (rem)	Size (px)
text-xs	0.563rem	9.0px
text-sm	0.750rem	12.0px
text-base	1.000rem	16.0px
text-lg	1.333rem	21.3px
text-xl	1.777rem	28.4px
text-2xl	2.369rem	37.9px
text-3xl	3.157rem	50.5px
text-4xl	4.209rem	67.3px
text-5xl	5.610rem	89.8px
text-6xl	7.478rem	119.7px
text-7xl	9.969rem	159.5px
text-8xl	13.288rem	212.6px
text-9xl	17.713rem	283.4px

h1-h6 mapping:

h1 -> text-5xl (5.610rem)
h2 -> text-4xl (4.209rem)
h3 -> text-3xl (3.157rem)
h4 -> text-2xl (2.369rem)
h5 -> text-xl (1.777rem)
h6 -> text-lg (1.333rem)

Apply this scale?

Backup check

This project has no uncommitted changes to protect against — proceeding.

Applied

Perfect Fourth scale (base 16px, ratio 1.333) applied to src/style.css.

Changes

@theme: --text-xs through --text-9xl set (rem values only)
@theme: --line-height-none overridden to 1.1
@layer base: h1-h6 font-size and line-height mapped to the scale
HTML: explicit text-* and leading-* classes removed from 2 heading elements

Conflicting classes found and removed

#	File:Line	Before	After
1	index.html:14	`<h2 class="text-ink font-semibold text-xl leading-tight mt-10 mb-4">`	`<h2 class="text-ink font-semibold mt-10 mb-4">` (h2 now uses text-4xl via @layer base)
2	index.html:18	`<h3 class="mt-2 font-medium text-primary text-base">`	`<h3 class="mt-2 font-medium text-primary">` (h3 now uses text-3xl via @layer base)

Changes take effect immediately if the dev server is running.

Heading line-height is set to 1.1 via @layer base (line-height: var(--line-height-none)). To adjust globally, change --line-height-none in your @theme block. Do not use leading-* Tailwind classes on headings — they override @layer base and break consistency.

tailwind-type-scale-generator.tsx

TSX · React component

Generated

Example file from a real run - the skill writes it into your workspace.

Connects securely to your tools. The creator never sees your data.

About this skill

Most projects end up with font sizes picked one at a time, 14px here, 15px there, a heading that is almost but not quite double the body text. This skill sets a whole scale at once: one base size, one named ratio, and every Tailwind text size from text-xs to text-9xl falls out of that single formula, along with h1 through h6.

What it does

Finds your Tailwind v4 entry file (the one with a @theme block) automatically, or asks if there is more than one
Asks for a base size (14, 16, 18, or 20px) and a scale ratio (Perfect Fourth, Major Third, Golden Ratio, or Minor Third), then shows the full text-xs to text-9xl table before touching anything
Maps h1 to h6 to the right step of the scale and sets a slightly loosened line-height for display sizes
Scans your HTML, Astro, JSX, TSX, and Vue files for headings with hardcoded text-* or leading-* classes that would silently override the new scale, and lists every one before removing them
Updates the typography section of DESIGN.md too, if your project has one

How it works

Checks the project for an existing scale, a v3 tailwind.config.js, and a DESIGN.md typography section before asking anything
You pick a base size and a ratio; the full rem and px table is shown for approval before any file is touched
If the project is a git repo with uncommitted changes, or not a git repo at all, you get a warning and a chance to back up first
The scale is written into your @theme block, headings are mapped in @layer base, and any conflicting classes found in your markup are listed for you to approve, choose individually, or skip

What it is not

This is Tailwind CSS v4 only (the @theme directive and --text-* variables). For v3 projects, font sizes belong in theme.fontSize inside tailwind.config.js instead, and this skill will tell you that and stop rather than writing something that will not work.

More from KMRVID

The full Claude Code skill bundle for web design workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills

How to install

Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

~30 seconds

1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.

Skills folder by agent

Click the path to copy it. Create the folder if it does not exist yet.

Reviews

5.0

1 review

2 people have installed this skill.

Tailwind Type Scale Generator