Classes
flex p-4
CSS
display:flex; padding:...
Developer Tools
Tailwind to CSS — Utility Class Expansion
Expand Tailwind CSS class lists into equivalent native CSS declarations for migration, reviews, and learning what utilities actually apply.
TailwindCSSConvert
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
开发工具
Tailwind to CSS
Use cases
- Migrate off Tailwind to plain CSS
- Inspect class-to-property mapping
- Review styles during code review
How to use
- Enter one or more class names
- Read generated CSS
- Copy needed rules
Example input and output
FAQ
Custom theme colors?
Default theme coverage is strongest; deep custom config may need your tailwind.config reference.
Relationship to css-to-tailwind?
This expands classes to CSS; the reverse tool suggests classes from CSS.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS to Tailwind
CSS to Tailwind — Declaration Mapper
Paste CSS declarations and map them to Tailwind utility classes where possible. Common layout, spacing, and color rules become standard classes; unmatched values fall back to arbitrary-value syntax.
CSS Tailwind Convert
CSS Unit Converter
CSS Unit Converter — px, rem, em, vw
Convert among px, rem, em, pt, vw, vh, and %. Customize root font size, parent font size, and viewport size for responsive work and design-to-code handoff.
CSS Units Conversion
Tailwind Colors Cheat Sheet
Tailwind Colors Cheat Sheet — Full Scale Board
Browse Tailwind CSS color scales (including 50–950 steps) on one board. Search by name, scale, or HEX, then copy utility class names or raw HEX values for CSS projects.
Design Tailwind CSS