Tailwind CSS Converter
Convert between CSS properties and Tailwind utility classes. Supports spacing, colors, typography, flexbox, grid, borders, shadows, transitions, and 80+ CSS properties.
Supported CSS Properties
Related Tools
Frequently Asked Questions
How does the CSS to Tailwind conversion work?
The tool parses your CSS declarations and maps each property-value pair to the corresponding Tailwind utility class. It supports the default Tailwind spacing scale, color palette, typography scale, and most common CSS properties. Unrecognized values use Tailwind's arbitrary value syntax (e.g., w-[137px]).
Does this handle responsive prefixes like sm: and md:?
For Tailwind → CSS conversion, responsive and state prefixes (sm:, md:, hover:, focus:, etc.) are stripped during conversion to produce the base CSS properties. For CSS → Tailwind, you'll need to add responsive prefixes manually since CSS media queries and the Tailwind responsive system map differently.
What Tailwind version does this target?
This converter targets Tailwind CSS v3/v4 utility class syntax, which uses the standard spacing scale (0, 0.5, 1, 2, 3, 4... 96), default color palette names, and the JIT-enabled arbitrary value bracket syntax for custom values.
Is my code safe? Does anything get sent to a server?
All conversion happens entirely in your browser using JavaScript. No CSS or Tailwind code is sent to any server. Your code never leaves your machine.