Methodology

The converter is a deterministic, browser-side pipeline. Understanding it helps you trust partial results instead of fighting them.

  1. Comment stripping removes /* */ comments without executing anything.
  2. Rule parsing walks selectors and declaration blocks, including nested @media.
  3. Declaration mapping translates known properties into Tailwind utilities.
  4. Arbitrary values are used when lengths/colors are valid but off the default scale.
  5. Responsive prefixes apply for recognized min-width breakpoints.
  6. Notes record unsupported at-rules, failed mappings, and complex selectors.

Worked example

.card { padding: 1.5rem; width: 37px; }
@media (min-width: 768px) {
  .card { padding: 2rem; }
}

Conceptually: p-6 w-[37px] md:p-8 on the matching element — then you still verify the UI.

What the engine does not claim

It does not compile Tailwind, does not run your build, and does not prove visual parity. It drafts utility class strings from declarations you paste.

Limitations (trust)

  • No computed-value resolution for CSS variables at runtime.
  • No layout engine — visual equality is not guaranteed.
  • Animations, nested CSS, and exotic selectors need human judgment.
  • Max-width / orientation media queries are not “auto solved” into default variants.

If you find a mapping that disagrees with this page, treat that as a bug report against either the engine or the docs — they are supposed to match.

Open converter