I'm using tailwindv4, when I use it on react vite, the styles are not applying.

For example I put

<h1 className = 'text-red -500'> 

Hello, World </h1> the style wouldn't apply. I followed the tailwindcss documentation but still no effect. Aside from that, IntelliSense also won't work.

I already tried applying this on my CSS file since some said on other forums that putting this will solve the problem. However, I only got some errors saying it's "unknown at rule.." ``

@tailwind base;
@tailwind components;
@tailwind utilities;

I also tried downgrading the tailwind version, but unfortunately, it's still not working.

I'm using tailwindv4, when I use it on react vite, the styles are not applying.

For example I put

<h1 className = 'text-red -500'> 

Hello, World </h1> the style wouldn't apply. I followed the tailwindcss documentation but still no effect. Aside from that, IntelliSense also won't work.

I already tried applying this on my CSS file since some said on other forums that putting this will solve the problem. However, I only got some errors saying it's "unknown at rule.." ``

@tailwind base;
@tailwind components;
@tailwind utilities;

I also tried downgrading the tailwind version, but unfortunately, it's still not working.

• reactjs
• installation
• tailwind-css
• vite

• This question is similar to: How to upgrade TailwindCSS?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – rozsazoltan Commented Mar 24 at 5:53
• * Cannot build frontend using Vite, TailwindCSS with PostCSS * Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command – rozsazoltan Commented Mar 24 at 5:54
• Updated TailwindCSS v3 installation guide with PostCSS plugin or New TailwindCSS v4 installation guide with Vite Plugin – rozsazoltan Commented Mar 24 at 5:55
• "unknown at rule.." its not error, just warning by VSCode IDE, should use TailwindCSS IntelliSense and should added this settings: Unknown at rule @tailwind, @plugin, @custom-variant, @theme – rozsazoltan Commented Mar 24 at 5:57
• I can't believe the spaces don't bother you: <h1 className = 'text-red -500'> ---> <h1 className='text-red -500'> – rozsazoltan Commented Mar 24 at 6:00

2 Answers 2

There is an issue with your className

This is the correct way text-red-500

<h1 className="text-red-500">
  Hello World
</h1>

You might also want to look up the tailwind documentation to understand how the classes work too.

In Tailwind CSS v4.0, you no longer need to import:

@tailwind base;  
@tailwind components;  
@tailwind utilities;  

Instead, you only need a single line:

@import "tailwindcss";

And if you're a Vite user, you can now integrate Tailwind using @tailwindcss/vite instead of PostCSS.

Here’s the example in documentation:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

You can check the documentation for more details:
https://tailwindcss/blog/tailwindcss-v4#simplified-installation