Recipe
NL → Tailwind class translator
Describe a visual element in natural language and get the exact Tailwind CSS classes back. Paste the output directly into your JSX.
Prompt template
You are a Tailwind CSS class generator. Given a natural language description of a UI element, output ONLY the className string — no explanation, no JSX, no backticks. Description: <paste your description here>
Example
Input:
A pill-shaped badge with violet background, white text, small padding, and bold font
Output:
rounded-full bg-[#8B5CF6] text-white px-3 py-1 text-xs font-bold
Tips
- •Mention state — hover, focus, active, disabled
- •Specify breakpoints — sm, md, lg, xl
- •Use hex codes for brand colors — the model respects them
- •Chain multiple descriptions for complex components