tailwind css: ⨯ @tailwind base; ^ SyntaxError: Invalid or unexpected token

[rushabhT3]

Body

I'm using Tailwind CSS in my next project. The project is running, but when I change the page or load a certain page, I get an error in the terminal:
⨯ @tailwind base;
^ SyntaxError: Invalid or unexpected token.
The exact error is in the following screenshot.

Can someone help me? I can't deploy to Vercel too due to this error.

It is also showing an 'Unknown at rule @tailwindcss (unknownAtRules)' error, but I'm not sure if it's the cause of the issue.

Guidelines

• I have read and understood this category's guidelines before making this post.

[Icegreeen]

Error: **SyntaxError: invalid or unexpected token**

In my case, I found the solution. It was for the following issue:

• I was importing Tailwind incorrectly into one of my components.

See the image below. I simply removed this import and the build error no longer occurred.

Solution: Check your project to see if there is any improper import in your components or pages in the project.

Version

"next": "^14.2.3",
"tailwindcss": "3.4.1",

[3ni8ma]

The error SyntaxError: Invalid or unexpected token on @tailwind base; means the CSS parser is hitting the @tailwind at-rule and doesn't understand it. This happens when Tailwind's PostCSS plugin isn't processing the file.

Most common cause: missing or misconfigured postcss.config.js

Vite needs a PostCSS config to tell it to process Tailwind directives. Create postcss.config.js in your project root:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Make sure you have the dependencies installed:

npm install -D tailwindcss @tailwindcss/vite autoprefixer

For Vite specifically, the newer Tailwind v4 uses a Vite plugin instead. In your vite.config.ts:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

With Tailwind v4, you replace all three @tailwind directives with a single import:

@import "tailwindcss";

If you're on Tailwind v3, the @tailwind base; @tailwind components; @tailwind utilities; directives go in your main CSS file (e.g. src/index.css), and you need postcss.config.js + tailwind.config.js for it to work.

The key check: if your CSS file is in src/ and imported in your JS entry point, Vite will pipe it through PostCSS automatically — but only if postcss.config.js exists at the project root.