reactjs - tailwindcss v4 not applying styles on react vite - Stack Overflow

admin管理员组

文章数量:1401636

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

Share Improve this question Follow edited Mar 24 at 0:36 Hilory 2,14177 gold badges1414 silver badges3030 bronze badges asked Mar 24 at 0:27 AmaranthAmaranth 1 5

• 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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

本文标签： reactjstailwindcss v4 not applying styles on react viteStack Overflow