CSS to Tailwind Converter
Convert CSS declarations into Tailwind utility classes, with media queries and hover states mapped to variants.
How it works
Paste a CSS rule and this converter maps each declaration onto the closest utility class
from the Tailwind CSS v3.4 default theme: the 0.25rem spacing scale, the
text-xs–text-9xl font sizes, the rounded and
border scales, the flexbox and grid utilities, and the default
sm/md/lg/xl/2xl
breakpoints (640, 768, 1024, 1280 and 1536 pixels). Shorthands are expanded first, so
padding: 8px 16px becomes py-2 px-4 and
margin: 0 auto becomes my-0 mx-auto. A
@media (min-width: 768px) block turns into an md: prefix and a
:hover selector into a hover: prefix. Values that sit off the
default scale keep their exact meaning through Tailwind's arbitrary-value syntax, for
example p-[13px] or text-[#ef4444].
This is a best-effort translator, not a full CSS parser. A small
hand-written tokenizer reads rules, at-rules, comments and declarations, and each
declaration is converted on its own. Anything with no matching utility is emitted as an
arbitrary property such as [mask-type:luminance], which is valid Tailwind
but an escape hatch rather than a real translation. Colours are written as arbitrary
values instead of being guessed at (bg-[#0f172a], not
bg-slate-900) because hex codes in real stylesheets rarely match Tailwind's
palette exactly; swap in a palette class wherever one fits. Descendant selectors,
combinators, @keyframes, @font-face and anything that depends
on cascade order are flagged under "Things to check by hand" rather than silently
converted. Nothing is uploaded: the whole conversion runs in JavaScript on your device.
Frequently asked questions
How do I convert CSS to Tailwind CSS?
Paste a CSS rule such as .btn { padding: 8px 16px; } into the input box and the Tailwind classes appear underneath as you type. Shorthands are expanded first, so that rule becomes py-2 px-4. Switch the output style to @apply rules or a className attribute, then copy or download the result. There is nothing to install and no account needed.
Which Tailwind version and theme does the converter use?
It maps declarations onto the Tailwind CSS v3.4 default theme: the 0.25rem spacing scale, the text-xs to text-9xl font sizes, the rounded and border scales, and the default breakpoints at 640, 768, 1024, 1280 and 1536 pixels. A @media (min-width: 768px) block becomes an md: prefix and a :hover selector becomes a hover: prefix. If you have customised your theme, check any class that came from a scale you changed.
What happens to CSS that has no matching Tailwind class?
Nothing is faked. Values off the default scale keep their exact meaning through arbitrary values such as p-[13px], colours are written as bg-[#0f172a] rather than a guessed palette class, and properties with no utility become an arbitrary property like [mask-type:luminance]. Nested selectors, @keyframes, @font-face and shorthands that collapse several properties are listed under Things to check by hand, because this is a best-effort translator rather than a full CSS parser.