[SOLVED] Tailwind CSS not applying styles

Tailwind CSS not applying styles

I am currently building a react-express web app and today I ran into many bugs, The first issue was with Webpack-5. I solved it by downgrading the version to 4.0.3 but when I started the react-app, the CSS was not working so I thought it might be an error with Node JS version so I installed the latest version but that caused another bug so I installed the LTS 16.15.1 version but the CSS still did not work. So the next thing I did was reinstall tailwind but that still did not fix it. I don't receive any error messages in the console or in the terminal.

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};

package.json

"devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "sass": "^1.52.1",
    "tailwindcss": "^3.1.3",
    "typescript": "^4.7.3"
  }

Here is the link to the project if that helps in any way.

Solution

I finally fixed the issue by following this: https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/. But am still not sure why it stopped working suddenly. The only problem with this solution is that on npm start it builds the CSS and outputs it to another file. The problem with that is that I have to restart the server everytime I make a change to the CSS.