CODEWITHSUNDEEP
reactjstailwind-cssvite
Fuaad
Fuaad

Reputation: 440

tailwindcss not applying styles in React Project

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

Upvotes: 0

Views: 174

Answers (1)

Scario Eva
Scario Eva

Reputation: 257

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

Upvotes: 0

Related Questions