CSS to Tailwind Converter
Suggest Tailwind utility classes for CSS declarations, in your browser.
About this tool
Paste CSS declarations, with or without a selector, to get the Tailwind class that matches each one. Declarations with no close match are marked, and values off the default scale become arbitrary values.
The suggestions are hints, not a full conversion, and they follow the default Tailwind scale. At most 100,000 characters are read, and the CSS stays on this page.
How to use it
- Paste CSS declarations, with or without a selector.
- Convert them.
- Copy the suggested classes. Declarations without a close match are marked so you can handle them by hand.
Example
Input:
display: flex;
justify-content: space-between;
padding: 16px;
gap: 7px;Suggested classes:
flex justify-between p-4 gap-[7px]