← All errors · BoltLovable & Bolt app errors

It looks like you're trying to use tailwindcss directly as a PostCSS plugin

Exact error

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

What it means

Your project has Tailwind CSS v4 installed but is still configured the Tailwind v3 way. In v4 the PostCSS plugin is no longer inside the tailwindcss package, so a postcss.config.js that lists tailwindcss: {} breaks the build. It often happens in Bolt, Lovable or Cursor projects when the AI runs npm install tailwindcss (which now installs v4) into a template written for v3.

Likely causes

• npm install tailwindcss or npm update pulled in Tailwind v4 while postcss.config.js still uses tailwindcss as a plugin.
• An AI assistant followed v3 setup steps (npx tailwindcss init -p) on a v4 install.
• Mixed versions: tailwindcss v4 plus a v3-era autoprefixer and tailwind.config.js setup.

How to fix it

1. Check which version you have:

   npm ls tailwindcss

2. Option A, stay on v4 with PostCSS: install the new plugin and point postcss.config.js at it. Tailwind v4 handles vendor prefixes itself, so autoprefixer can be removed:

   npm install -D @tailwindcss/postcss
   
   // postcss.config.js (use module.exports = {...} if the file is .cjs)
   export default {
     plugins: {
       '@tailwindcss/postcss': {},
     },
   };

3. Then replace the old v3 directives at the top of your main CSS file (often src/index.css) with a single import:

   /* remove these */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   /* add this */
   @import "tailwindcss";

4. v4 does not load tailwind.config.js on its own. If your theme lives there (custom colors, shadcn/ui settings), load it explicitly from the CSS file, or run Tailwind's upgrade tool to convert it:

   /* src/index.css */
   @import "tailwindcss";
   @config "../tailwind.config.js";
   
   # or, from the project root (needs Node 20+):
   npx @tailwindcss/upgrade

5. Option B, the quickest fix for an existing v3 project (most shadcn/ui templates): pin Tailwind back to v3 so the current config keeps working:

   npm install -D tailwindcss@3 postcss autoprefixer

6. Restart the dev server (in Bolt, stop and rerun npm run dev in the terminal) and check that styles load. If the page renders without any styling, the CSS import or content paths are still wrong.

Prevent this next time

• Connect the project to GitHub so every AI edit is versioned and reversible.
• Run `npm run build` locally or in CI before deploying an exported project.

Last checked against official docs on October 18, 2026. Sources: Tailwind CSS upgrade guide (v3 to v4), Tailwind CSS docs: installing with PostCSS.

Related errors

• Failed to parse source for import analysis because the content contains invalid JS syntax
• Lovable/Vite: Failed to resolve import
• Command "npm run build" exited with 1

More Bolt errors and fixes →