Convert Tailwind to CSS: what each class turns into
Free to convert, no signup: paste a Tailwind page's URL, get one HTML file with plain CSS and readable class names. The converted file has no Tailwind classes left, so it needs no build step or Tailwind CDN. Below is what each class turns into, with real output from the converter.
How the mapping works
Every distinct element style turns into one readable class name, such as pricing-card or nav-link. Elements that share identical utilities reuse the same class so the CSS is defined only once. Elements that look similar share a base class for shared layout and sizing, paired with a modifier class for unique differences like colors.
Tailwind variants become clean, native CSS rules nested inside each class. Breakpoint prefixes like md: turn into nested @media queries, while hover:, focus-visible:, and disabled: become &:hover, &:focus-visible, and &:disabled. Dark mode variants become nested @media (prefers-color-scheme: dark) blocks, or &:where(.dark, .dark *) selectors if the site toggles dark mode with a class. Styles tied to attributes your scripts set, like &[aria-expanded=true], are kept too.
Values come straight from the page's original Tailwind build. On Tailwind v4 pages, the theme colors the page uses stay as CSS variables on :root and are referenced with var(), while Tailwind v3 pages output standard values like rgb() colors and pixel breakpoints. Tailwind's Preflight reset rules are placed at the top of the stylesheet so typography and defaults render just like the original.
Class by class
Button utilities to base and modifier classes
<!-- before -->
<a href="#" class="mt-8 inline-flex w-full items-center justify-center rounded-lg
bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500">Get Pro</a>
<!-- after -->
<a href="#" class="pricing-cta pricing-cta-pro">Get Pro</a>
.pricing-cta {
margin-top: 2rem;
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: .5rem;
padding-inline: 1rem;
padding-block: 0.625rem;
font-size: .875rem;
line-height: 1.4286;
font-weight: 600;
}
.pricing-cta-pro {
background-color: var(--color-indigo-600);
color: var(--color-white);
@media (hover:hover) {
&:hover {
background-color: var(--color-indigo-500);
}
}
}The original 13 utility classes are replaced by class="pricing-cta pricing-cta-pro". Shared layout, padding, and type live in .pricing-cta, while unique colors and hover rules sit in .pricing-cta-pro.
Individual Tailwind utilities mapped to standard CSS
px-4 -> padding-inline: 1rem;
py-16 -> padding-block: 4rem;
mx-auto -> margin-inline: auto;
max-w-5xl -> max-width: 64rem;
mt-8 -> margin-top: 2rem;
w-full -> width: 100%;
rounded-2xl -> border-radius: 1rem;
text-3xl -> font-size: 1.875rem; line-height: 1.2;
font-semibold -> font-weight: 600;
tracking-tight -> letter-spacing: -.025em;
bg-indigo-600 -> background-color: var(--color-indigo-600);
md:grid-cols-2 -> @media (min-width:48rem) {
grid-template-columns: repeat(2,minmax(0,1fr));
}Common utility classes map directly to modern CSS properties, CSS variables, and nested media queries.
Responsive and dark mode variants nested in one rule
<!-- before -->
<h1 class="text-center text-3xl font-bold tracking-tight text-gray-900
md:text-5xl dark:text-white">Simple pricing</h1>
<!-- after -->
<h1 class="pricing-title">Simple pricing</h1>
.pricing-title {
text-align: center;
font-size: 1.875rem;
line-height: 1.2;
font-weight: 700;
letter-spacing: -.025em;
color: var(--color-gray-900);
@media (min-width:48rem) {
font-size: 3rem;
line-height: 1;
}
@media (prefers-color-scheme:dark) {
color: var(--color-white);
}
}Variants like md:text-5xl and dark:text-white become clean @media queries nested directly inside .pricing-title.
Theme colors on :root (Tailwind v4, trimmed)
:root, :host {
--color-indigo-50: oklch(96.2% .018 272.314);
--color-indigo-200: oklch(87% .065 274.039);
--color-indigo-500: oklch(58.5% .233 277.117);
--color-indigo-600: oklch(51.1% .262 276.966);
--color-gray-50: oklch(98.5% .002 247.839);
--color-gray-900: oklch(21% .034 264.665);
--color-white: #fff;
}On Tailwind v4 pages, colors used throughout the layout are declared once as CSS variables on :root.
Exports and pricing
Converting is free and requires no account. To copy, download, or deploy the file, sign in with a free ship.page account to get 3 exports per calendar month, and exporting the same conversion again doesn't count twice. Pro is $4/mo for unlimited exports.
It works on public pages up to 10,000 elements, 3 conversions a minute, and results are kept for 24 hours. Banking, webmail, hosting control panels and login pages are refused.
Check before you ship it
Check
Compare the match score at desktop and mobile widths, and the screenshots of both versions.Check
Check older browser needs: native CSS nesting works in Chrome, Edge, Firefox, and Safari since 2023, but older browsers need a transform like Lightning CSS.Check
Test interactive parts. Page scripts are removed, so menus, tabs and modals stay closed until you add your own JavaScript back.Check
Verify assets: images and web fonts continue to load directly from the original host URLs.Questions
Is there a free Tailwind to CSS converter?
Yes. ship.page converts public Tailwind pages for free with no signup: paste the URL and you get one HTML file with plain CSS and readable class names. Exporting needs a free account with 3 exports a month, or Pro at $4/mo for unlimited exports.
How do I convert Tailwind classes to plain CSS?
Paste the public URL of your Tailwind page into the converter at ship.page/tools/tailwind-to-css. You will receive a static HTML file where all utility classes are replaced by named classes and plain, nested CSS rules.
Can I convert local files or raw Tailwind classes without a URL?
The converter works by URL and does not accept raw classes, source files, or tailwind.config files directly. To convert local files, drop your files or a zip onto ship.page to generate a free 30-day link, then paste that link into the tool.
Does it work with Tailwind v3 and v4?
Yes, both Tailwind v3 and Tailwind v4 pages are supported. On Tailwind v4 sites, the theme colors the page uses stay as CSS variables on :root and hover rules keep Tailwind's @media (hover: hover) wrapper. Tailwind v3 pages get plain values like rgb(17 24 39/1).
How does the converted page handle responsive styles and hover effects?
Variants are converted into native nested CSS rules inside the element's class. Responsive prefixes like md: become nested @media queries, while hover: and focus-visible: become nested pseudo-classes like &:hover and &:focus-visible.
How do I convert an entire multi-page Tailwind website?
Convert each distinct page template separately, such as the home page, an interior content page, and a form. You can then reuse the shared class names and generated styles across your project.
How can I convert plain CSS back into Tailwind classes?
Use the CSS to Tailwind converter at ship.page/tools/css-to-tailwind. Paste a page URL and get the same HTML back with Tailwind v4 or v3 classes.
Convert your Tailwind page to clean CSS
Paste a public URL, check the match score, and export one HTML file with plain CSS. Converting is free and needs no account.