# Upgrade a Tailwind 3 site to Tailwind 4 URL: https://xodia.ai/guides/upgrade-tailwind-3 Description: Upgrade a Tailwind CSS 3 site to Tailwind 4 in three steps, or let your AI do it, then import it into Xodia and edit it visually. Last updated: 2026-11-08 Xodia opens sites styled with Tailwind CSS 4. If your import stopped at Tailwind 3, upgrade the repository with Tailwind's own upgrade tool, check that it still looks the same, push it and import it again. Your AI can do the whole job for you. Updated November 4, 2026 [Start free](https://app.xodia.ai/auth/sign-up?ref=guides-upgrade-tailwind-3) [Supported frameworks](https://xodia.ai/frameworks) Free plan. No card needed. Why Tailwind 4 ## Xodia edits Tailwind 4 code Every change you make in the Style panel is written into your files as Tailwind 4 classes, and your colours, fonts and sizes live in your CSS file, where Variables edits them. Tailwind 3 keeps them in a config file and builds differently, so Xodia can't edit it safely yet. - The upgrade is a one-time change to your own repository - Your pages, content and design stay as they are - Every stack Xodia opens: [Frameworks](https://xodia.ai/frameworks) Step by step ## How to upgrade to Tailwind 4 Three steps from a refused import to your site open in Xodia. 1. 1 Run the upgrade tool on a branch In your site's repository, start a new branch with a clean git tree, so every change is easy to review. Then run npx @tailwindcss/upgrade. It needs Node 20 or newer, and it updates your packages, config, CSS and class names in one go. 2. 2 Check the site, then push Run npm run build and fix anything it reports. Start the site and compare your key pages with the live site, on a phone width and a desktop width. When they match, commit, push and merge the branch. 3. 3 Import it again in Xodia In Xodia, press New project, choose Import from GitHub and pick the repository. Xodia checks it again and opens it with the full Style panel. Step 1, in your repository ``` npx @tailwindcss/upgrade ``` Step 2, in your repository ``` npm run build ``` Let your AI do it ## Hand the upgrade to your AI Paste this into Claude Code, Cursor, Codex or any AI that works in your repository. With Xodia's [MCP](https://xodia.ai/glossary/mcp) server connected, it also follows Xodia's upgrade skill. Prompt for your AI ``` Upgrade this site from Tailwind CSS 3 to Tailwind 4 so Xodia can import it. Use the Xodia skill tailwind-upgrade if you have the Xodia MCP connected. Work on a branch, run npx @tailwindcss/upgrade, fix what it misses, check the build and the pages look the same, then push. ``` Common fixes ## What the tool can miss The upgrade tool does most of the work. These are the changes people most often finish by hand. - A Vite plugin instead of PostCSS Tailwind 4 has its own Vite plugin. Add `@tailwindcss/vite` to `vite.config`, and take `tailwindcss` and `autoprefixer` out of your PostCSS config. - A new animation package Sites built with shadcn/ui often use `tailwindcss-animate`, which only works with Tailwind 3. Swap it for `tw-animate-css` and import it in your main CSS file. - Theme colours move into CSS Colours, fonts and other theme values leave `tailwind.config` and go into an `@theme` block in your main CSS file. That block is what Variables edits in Xodia. - A few renamed classes Some classes have new names: `shadow-sm` is now `shadow-xs`, `rounded-sm` is `rounded-xs` and `outline-none` is `outline-hidden`. The tool renames them in your files, but can miss classes your code builds from strings. - Thinner rings A plain ring was 3 pixels wide and is now 1 pixel. Where you want the old focus ring back, use `ring-3`. - A new border colour default A border with no colour now uses the text colour instead of light grey. Give borders a colour, such as `border-gray-200`, where it matters. Questions ## Questions about upgrading to Tailwind 4 **Will my design change?** It shouldn't. The upgrade tool keeps your classes and theme values doing what they did, and the fixes above cover the defaults that changed. Compare your key pages before you push, and fix anything that looks different. **Will Xodia support Tailwind 3 later?** Not today. Xodia's Style panel and Variables are built on Tailwind 4. We watch how many Tailwind 3 sites people try to import, and will look at it again if there is demand. **What about new Bolt projects?** New Bolt projects on Vite and React already use Tailwind 4 and import as they are. Older Lovable and Bolt projects are the ones that usually need this upgrade. See [Bring your Lovable or Bolt site](https://xodia.ai/switch/lovable-bolt). **The upgrade tool stopped with an error. What now?** Check that you run Node 20 or newer and that git shows no uncommitted changes, then run it again. If it still stops, ask your AI with the prompt above: it can read the error and finish the upgrade by hand. Keep exploring ## Related guides and pages - [Edit an AI-built site exported to GitHub Import the repo an AI tool made and keep editing](https://xodia.ai/guides/edit-ai-built-site-github) - [Connect an MCP server to build and edit your website Add Xodia to Claude Code, Cursor or any MCP app](https://xodia.ai/guides/connect-mcp-server-website) - [Lovable and Bolt sites Import the repo and edit with no credits](https://xodia.ai/switch/lovable-bolt) - [Frameworks Every stack Xodia opens](https://xodia.ai/frameworks) - [The visual editor Canvas, Style panel and Variables](https://xodia.ai/product/visual-editor) - [GitHub Import, branches and pull requests](https://xodia.ai/integrations/github) [See every guide](https://xodia.ai/guides) ## Upgrade once, then edit your site by hand. [Start free](https://app.xodia.ai/auth/sign-up?ref=guides-upgrade-tailwind-3-cta) [See pricing](https://xodia.ai/pricing)