Tailwind not working on React project created with Webstorm's Vite [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 7 months ago.

Improve this question

I created a new React JS with Typescript project using Webstorm's Vite generator. Then, I installed Tailwind by following the instruction for Vite from Tailwind's official website.

For step 3, I added the import in the index.css and App.css as I'm not sure which one I'm supposed to add it to.

Adding the link tag in step 5 doesn't seem to fix the problem either.

After I've done all that, I'm not seeing any Tailwind class names being suggested when typing and it doesn't seem that Tailwind is working at all.

Here is my package.json:

    {
      "name": "reacttest",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "tsc -b && vite build",
        "lint": "eslint .",
        "preview": "vite preview"
      },
      "dependencies": {
        "@tailwindcss/vite": "^4.0.17",
        "react": "^19.0.0",
        "react-dom": "^19.0.0"
      },
      "devDependencies": {
        "@eslint/js": "^9.21.0",
        "@types/react": "^19.0.10",
        "@types/react-dom": "^19.0.4",
        "@vitejs/plugin-react": "^4.3.4",
        "autoprefixer": "^10.4.21",
        "eslint": "^9.21.0",
        "eslint-plugin-react-hooks": "^5.1.0",
        "eslint-plugin-react-refresh": "^0.4.19",
        "globals": "^15.15.0",
        "postcss": "^8.5.3",
        "tailwindcss": "^4.0.17",
        "typescript": "~5.7.2",
        "typescript-eslint": "^8.24.1",
        "vite": "^6.2.0"
      }
    }

Any idea what I'm missing?

How to install React, TypeScript and TailwindCSS v4 using PostCSS — rozsazoltan
– rozsazoltan, Commented Mar 29 at 12:48
You're sharing too little information. You say you followed the instructions, yet it doesn't work. The instructions are correct, so the issue must be in your code. Unfortunately, you've only shared the package.json, which looks fine. There are some related questions that demonstrate setting up React + Vite + TailwindCSS. - react tailwind config do not work -- Error: 'could not determine executable to run' when initializing Tailwind CSS with React — rozsazoltan
– rozsazoltan, Commented Mar 29 at 13:30
Error when adding Tailwind CSS to an existing React - vite project — rozsazoltan
– rozsazoltan, Commented Mar 29 at 13:30
Tailwind css isnt working in my react i.e it isnt being detected in my css files --- My react and tailwind app are applying the class but the style does not change — rozsazoltan
– rozsazoltan, Commented Mar 29 at 13:32

Zavius Firerave · Accepted Answer · 2025-03-30 07:36:00Z

0

Ok, not sure what changed but when I came back to my project and tried deleting all the generated css classes and the generated react component, the tailwind just works. It also still worked after I reverted all my changes to the state where it wasn't working before.

So, I'm closing this question.

answered Mar 30 at 7:36

Zavius Firerave

451 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CPlus · Accepted Answer · 2025-04-06 05:32:07Z

-1

Make sure you properly set up the configuration files:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then import tailwind in your main CSS file:

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

Also remove @tailwindcss/vite from dependencies as you have tailwindcss in your devDependencies.

Also restart Webstorm after installing Tailwind and setting up the configuration files.

edited Apr 6 at 5:32

CPlus

5,11048 gold badges33 silver badges77 bronze badges

answered Mar 29 at 11:44

Roshin Prasad

134 bronze badges

3 Comments

rozsazoltan Mar 29 at 12:02

AI generated answer?

Zavius Firerave Mar 29 at 12:18

I think this is the older way to do it. I read in another post that the @tailwind directive has been deprecated in Tailwind Ver.4 and the official instruction doesn't even mention tailwind config file at all anymore

le3th4x0rbot Apr 2 at 13:55

@rozsazoltan for all of its ills AI typically uses punctuation and formal language, so no.

Collectives™ on Stack Overflow

Tailwind not working on React project created with Webstorm's Vite [closed]

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related