Responsive CSS to Tailwind
@media (min-width: 768px) aligns with md:. 1024px with lg:. Complex queries need manual review.
Only min-width is “easy”
Simple min-width queries map to sm:/md:/lg:. Max-width combinations and
orientation queries deserve a note and a manual decision.
Mobile-first rewrite
If your CSS was desktop-first with max-width queries, expect a mental rewrite when moving to Tailwind’s mobile-first variants. Budget time for that, not only for class typing.
Container queries
Container queries are a different tool. Do not assume media-query prefixes solve component-level responsiveness.
Try it
.example { display: flex; gap: 1rem; padding: 1rem; }Trust note: verify output visually. The converter is a draft helper for developers.