tailwindcss not applying styles in React Project

Question

I'm trying to use tailwindcss in my React Project developed through Vite. But it's not working. Let me explain the process step by step.

At first, I run following commands:

npm install -D tailwindcss
npx tailwindcss init

Then, added following code to my tailwind.config.js file.

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

After that, added tailwind layers to index.css file.

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

And finally, run the following command:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

But the issue is that the styles aren't generating at all through tailwind. Also, my package.json also shows tailwind in devDependencies:

"devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "tailwindcss": "^3.4.1",
    "vite": "^5.0.8"
  }

Here is the link to github repo: https://github.com/muhammadfuaad/my_react_app

Scario Eva · Accepted Answer · 2024-01-30 17:01:03Z

0

change from content: ["./src/*.{html,js,jsx}"], to content: ["./src/**/*.{html,js,jsx}"], in your tailwind.config.js file.

answered Jan 30, 2024 at 17:01

Scario Eva

2572 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

tailwindcss not applying styles in React Project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related