Upgrade a Tailwind 3 site to Tailwind 4
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
Free plan. No card needed.
Xodia's New project dialog asking how you want to start: Start a new site from a template or a starter, Import from GitHub to open a site you already have, or Import a website by its address, with Import from GitHub outlined, and the optional Connect your AI line.
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
The Variables panel: the bakery site's paper, ink and accent colours, its display font, fluid text sizes and spacing, read from src/index.css, with Light and Dark mode.
Step by step
How to upgrade to Tailwind 4
Three steps from a refused import to your site open in Xodia.
- 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
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
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.
npx @tailwindcss/npm run buildLet 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 server connected, it also follows Xodia's upgrade skill.
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/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/vitetovite.config, and taketailwindcssandautoprefixerout 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 fortw-animate-cssand import it in your main CSS file.Theme colours move into CSS
Colours, fonts and other theme values leave
tailwind.configand go into an@themeblock in your main CSS file. That block is what Variables edits in Xodia.A few renamed classes
Some classes have new names:
shadow-smis nowshadow-xs,rounded-smisrounded-xsandoutline-noneisoutline-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.
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 GitHubImport the repo an AI tool made and keep editing
- Connect an MCP server to build and edit your websiteAdd Xodia to Claude Code, Cursor or any MCP app
- Lovable and Bolt sitesImport the repo and edit with no credits
- FrameworksEvery stack Xodia opens
- The visual editorCanvas, Style panel and Variables
- GitHubImport, branches and pull requests