Convert CSS to Tailwind: what each rule turns into
Converting CSS to Tailwind comes down to one question per rule: which utility does the same thing? For a handful of rules, you can look them up by hand. For an entire page, paste the URL into the converter and map every element at once.
How the mapping works
Each element gets classes for the styles that actually apply to it. If a rule targets one element, its classes go there. Unused rules produce no classes.
Values on Tailwind's default scale become standard utility classes: 16px of gap becomes gap-4, and an 8px radius becomes rounded-lg. Anything else is preserved as an exact arbitrary value, like text-[18px], while colors keep their exact values, like bg-[#22c55e].
Media queries become breakpoint variants, and states like :hover become variants like hover:, preserving responsive layouts and interactive styles.
Websites convert one page at a time: paste each URL you need. Only public pages work; banking, webmail, hosting control panels, and login pages are refused.
Rule by rule
Spacing, radius, type, and color
padding: 10px 20px; -> py-2.5 px-5
gap: 16px; -> gap-4
border-radius: 8px; -> rounded-lg
font-size: 18px; -> text-[18px]
font-weight: 600; -> font-semibold
background-color: #22c55e; -> bg-[#22c55e]
text-decoration: none; -> no-underlineNamed classes where a value fits Tailwind's scale, and exact arbitrary values everywhere else.
Media queries
@media (min-width: 768px) -> md:
@media (min-width: 992px) -> min-[992px]:
@media (max-width: 640px) -> [@media(max-width:640px)]:Breakpoints stay at your stylesheet's custom widths instead of shifting to the nearest Tailwind breakpoint.
States and !important
.button:hover { background-color: #16a34a; }
-> hover:bg-[#16a34a]
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(49,132,253,.5); }
-> focus-visible:shadow-[0_0_0_0.25rem_rgba(49,132,253,.5)]
.d-none { display: none !important; }
-> hidden! (v4)!important rules preserve their priority through Tailwind's important modifier.
Prefixed output for an existing project (v3)
<a class="button twfy-inline-block twfy-py-2.5 twfy-px-5 twfy-rounded-lg
twfy-bg-[#22c55e] twfy-font-semibold twfy-no-underline
hover:twfy-bg-[#16a34a]">The optional prefix keeps generated classes apart from yours: twfy- on v3, twfy: on v4.
Exports and pricing
Converting is free and requires no account. Exporting the HTML requires a free account, which includes 3 exports a month. Pro is $4/mo with unlimited exports.
You can run up to 3 conversions a minute, and results are stored for 24 hours.
Check before you ship it
Check
Review the match score and toggle between the before and after screenshots to catch any styling that did not carry over.Check
Hover over links and buttons, and resize the window through your breakpoints.Check
Check images and fonts, which still load from the original site. Copy them over locally if the page needs to stand on its own.Questions
Can I convert a whole website to Tailwind?
Convert one page at a time. Paste each URL you need, starting with your primary templates, then reuse the generated classes across the rest of the site.
Can I paste CSS instead of a URL?
No. The converter needs the page as well as the stylesheet, since one rule can end up on many elements. If your files are local, publish them on ship.page for a free link and paste that.
Does it work with SCSS, Sass or Less?
Yes, once they're built. The converter works from the CSS the page loads, so it doesn't matter what produced it.
Why bg-[#22c55e] instead of a palette class?
Your exact colors are kept so the page looks the same. If you have a theme palette, swap its colors in afterwards.
What does the converted HTML depend on?
It is a single HTML file that loads Tailwind from a CDN, with Preflight disabled so the original base styles stay intact. Images and fonts still load from the original site.
Convert a page
Paste any public URL, pick Tailwind v4 or v3, and check the match score. Converting is free and needs no account.