CSS to Tailwind
Map CSS declarations onto Tailwind utility classes
What is CSS to Tailwind?
This CSS to Tailwind converter maps common declarations onto their utility class equivalents, falling back to the square-bracket arbitrary value syntax for numeric properties and listing anything it cannot map so you can handle it yourself. The mapping runs entirely in your browser.
How to use CSS to Tailwind
- 1Paste one or more complete CSS rules, selectors and braces included.
- 2Review the class string generated for each selector.
- 3Work through the "Unmapped" list at the bottom one declaration at a time.
- 4Replace the arbitrary bracket values with the standard scale from your design tokens.
Frequently asked questions
Why does it output p-[16px] instead of p-4?+
Mapping onto the standard scale would require knowing your project spacing configuration. The tool chooses fidelity over guesswork: it gives you an exactly equivalent arbitrary value, and you swap in the right step from your design system, so nothing shifts visually along the way.
Can pseudo-classes, media queries, and animations be converted?+
Not automatically. Pseudo-classes need prefixes such as hover: and focus:, media queries need to become breakpoint prefixes such as sm: and md:, and keyframe animations have to be registered in your Tailwind config. All of these are structural rewrites that call for human judgment.
Related tools
All toolsJSON to YAML Converter
Convert JSON to YAML while preserving the nesting
YAML to JSON Converter
Convert YAML to JSON, multi-document files included
JSON to CSV Converter
Convert a JSON array of objects to CSV, with nested fields flattened automatically
CSV to JSON Converter
Convert CSV to JSON with automatic header and delimiter handling
JSON to TypeScript
Infer TypeScript type definitions from JSON
JSON to Go Struct
Convert JSON to Go structs with json tags filled in