Tailwind styles are not working in vite + react

I followed the tailwind installation process. The styles worked fine initially, but they stopped working after a while. I have installed the latest version of react-scripts. No error is being shown but the expected result is not coming either. I have tried restarting the dev server but got no results.
This is:
**post.config.cjs:
**

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

**vite.config.js
**

import tailwindcss from 'tailwindcss'


export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  }
})
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "vite": "^5.0.8"
  }
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-router-dom": "^6.21.1",
    "react-scripts": "^5.0.1",
    "react-spinners": "^0.13.8",
    "swiper": "^11.0.5"
  },

  • As an aside, you shouldn’t need react-scripts if you have vite.

    – 

Leave a Comment