Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsTailwind Type Scale Generator
Picks a harmonious font-size scale for your Tailwind v4 project — one base size and one named ratio, applied everywhere from text-xs to h1.
Free
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-xsthrough--text-9xlset (rem values only)@theme:--line-height-noneoverridden to 1.1@layer base: h1-h6 font-size and line-height mapped to the scale- HTML: explicit
text-*andleading-*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.
style.css
TSX · React component
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.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Requires Tailwind CSS v4. Does not support v3 tailwind.config.js files. Identifies literal class strings in React but may miss dynamic class composition tools like cva or complex cn() logic.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
This skill has been used 5 times.
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
Permissions
File Scopes
Terminal: runs small inline Node.js checks (git status for a backup warning, a scan for heading classes that would conflict with the new scale) — no external packages, no network access. Read Files: reads the Tailwind CSS entry file, heading markup, and DESIGN.md if present. Write Files: edits the CSS file and removes conflicting classes only after you approve the previewed scale and the listed changes.