Remove Tailwind and convert to vanilla CSS
Free to convert, no signup: turn each Tailwind page into plain CSS with readable class names, then uninstall Tailwind. Paste the page's URL, check the match score, and copy the CSS into your project.
How to move off Tailwind
Start by converting your key pages or templates by URL with the Tailwind to CSS converter. For a static HTML site, the converted file can replace the original page once you add back any scripts it used. For React, Vue, Svelte or Next.js apps, use the output as a reference: add the CSS to your stylesheet, then swap utility classes for the new class names across your components.
Next, uninstall Tailwind from your build. For Tailwind v4 with Vite, run npm uninstall tailwindcss @tailwindcss/vite, remove the plugin from vite.config, and drop @import "tailwindcss"; from your CSS. On v4 with PostCSS, as in Next.js, the package is @tailwindcss/postcss, and with the CLI it is @tailwindcss/cli. For Tailwind v3, run npm uninstall tailwindcss, remove tailwind.config.js, take the plugin out of postcss.config.js, and delete the three @tailwind directives.
The converter carries over breakpoints, hover states, dark mode, focus styles and styles tied to attributes like aria-expanded. Tailwind's Preflight reset stays at the top as regular CSS, and v4 theme colors stay as CSS variables on :root. Page scripts are stripped, leaving a static page, so add your JavaScript back for menus and modals.
What changes in your code
Pricing card markup before and after
<!-- before -->
<div class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200
dark:bg-gray-900 dark:ring-gray-800">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Pro</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">For teams that ship every week.</p>
<p class="mt-6 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">$12</p>
<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>
</div>
<!-- after -->
<div class="pricing-card">
<h2 class="pricing-card-title">Pro</h2>
<p class="pricing-card-description">For teams that ship every week.</p>
<p class="pricing-card-price">$12</p>
<a href="#" class="pricing-cta pricing-cta-pro">Get Pro</a>
</div>
.pricing-card {
border-radius: 1rem;
background-color: var(--color-white);
padding: 2rem;
box-shadow: 0 0 0 1px var(--color-gray-200), 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
@media (prefers-color-scheme:dark) {
background-color: var(--color-gray-900);
box-shadow: 0 0 0 1px var(--color-gray-800), 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
}Thirty-five utility classes are replaced by shared semantic classes like pricing-card and pricing-cta. Elements that share styles reuse the base class, with modifiers added for distinct variations. The ring-1 and shadow-sm utilities end up in one box-shadow.
Uninstalling Tailwind v4 from a Vite project
npm uninstall tailwindcss @tailwindcss/vite
# vite.config.ts: remove the import and the plugin
import tailwindcss from "@tailwindcss/vite";
plugins: [tailwindcss()],
# your main stylesheet: remove this line
@import "tailwindcss";Run the uninstall command, remove the Tailwind plugin import and call from vite.config.ts, and delete the single @import line from your stylesheet.
Uninstalling Tailwind v3 from a PostCSS project
npm uninstall tailwindcss
rm tailwind.config.js
# postcss.config.js: remove the tailwindcss entry
plugins: {
tailwindcss: {},
autoprefixer: {},
},
# your main stylesheet: remove these lines
@tailwind base;
@tailwind components;
@tailwind utilities;Uninstall the package, delete tailwind.config.js, remove tailwindcss from postcss.config.js, and remove the base, components, and utilities directives. Keep postcss and autoprefixer if anything else in your build uses them.
Exports and pricing
Converting pages is free and requires no account. A free ship.page account includes 3 exports per calendar month to copy, download or deploy the result, and re-exporting the same conversion does not count against your limit. Pro costs $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 after the switch
Check
Check your layout and typography against the match score and the screenshots of both versions.Check
Verify interactive states like :hover, :focus-visible and dark mode in your browser.Check
Test that dynamic attributes like [aria-expanded] or [data-open] respond to your scripts.Check
Run the CSS through Lightning CSS or postcss-nesting if you need to support browsers older than 2023.Questions
How do I remove Tailwind from my project without breaking styles?
Convert your rendered pages using the Tailwind to CSS converter at ship.page/tools/tailwind-to-css to get clean HTML with plain CSS. Copy that CSS into your project, update your component classes to match the new names, and uninstall the Tailwind packages.
How do I convert local files that are not online yet?
Drop your files or a zip archive onto ship.page to get a free temporary link at https://<slug>.shipped.run without signing up. Paste that link into the converter to generate your vanilla CSS.
Can I convert an entire multi-page site all at once?
No, the tool converts one page URL at a time. For full sites, convert each primary template type such as your home page, a content page and a form, then reuse those shared classes across your templates.
Does the converter read my tailwind.config.js or component source files?
No, it converts the rendered page by URL rather than reading source code, components or configuration files. You cannot paste raw CSS or class lists directly into the tool.
Do I need a build step for the converted CSS?
No build step is required for modern browsers, as native CSS nesting has been supported in Chrome, Edge, Firefox and Safari since 2023. If you must support older browsers, process the stylesheet with Lightning CSS or postcss-nesting.
What happens to Tailwind dark mode and media queries?
They are kept as plain CSS. Breakpoints become regular @media queries, and dark mode becomes @media (prefers-color-scheme:dark), or a nested &:where(.dark,.dark *) rule when the site switches dark mode with a .dark class.
Will my dropdowns and modals still work?
Not until you add your scripts back. The converted page has no JavaScript, but styles tied to classes and attributes your scripts toggle, like aria-expanded or data-open, are kept.
Convert your first Tailwind page to vanilla CSS
Paste a public page URL, check the match score, and export the plain CSS. Converting is free and needs no account.