CSS classes are not working with Vite + React + SWC

[yashparekh-42cs]

I followed below command for vite installation and then selected React as framework and Javascript+SWC as variant.
npm create vite@latest

Then after I executed the command "npm install" for dependencies and started the development server using "npm run dev"

Till here everything works fine. Now I want to install Tailwind v4 in this Vite project so I followed this steps.
https://tailwindcss.com/docs/installation/using-vite

After doing all this, when I tried to use just a normal tailwind class "h-full w-full ...", it doesn't reflects anything. The network tab shows that index.css loaded successfully and even there is no errors in console but don't know why tailwind classes are not working.

Please suggest me some way. Attaching few files for reference.

package.json

{
  "name": "vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.14",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^4.0.14"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "vite": "^6.2.0"
  }
}

vite.config.js

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Node version - 20.18.2
NPM version - 10.8.2

[wongjn]

Consider checking:

• You've added @import "tailwindcss"; to a CSS file that is imported in the app.
• Whether the styles for h-full, w-full appear in the devtools for the element.

Otherwise, consider providing a git repo that reproduces the unexpected behavior.

[yashparekh-42cs]

Yes. I have configured it properly. You can check the code here.

https://codesandbox.io/p/devbox/46ncpr

In above codesandbox URL, it's working but the exact same code is not working in my local. I'm using M3 pro, if it matters.

[wongjn]

That link didn't seem to work, I got:

Joining collaboration session: This collaboration session is no longer active. Please check the link provided by the host and try again.

Consider providing a git repo that reproduces the unexpected behavior instead.

[yashparekh-42cs]

@wongjn Updated the link. Can you please tell me what's wrong with mac?

[yashparekh-42cs]

@wongjn

https://codesandbox.io/p/devbox/46ncpr

In above codesandbox URL, it's working but the exact same code is not working in my local. I'm using M3 pro, if it matters.