Tailwind CSS not applying styles

Question

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.

Answer 1

I had the same issue, the solution for me was in the content array in the tailwind.config.json where I specified the path to the folder where I what the styles to get applied

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",  
    "./components/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#366B45"
      },

      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Answer 2

Along with the above answers, I've figured that it usually boils down to either the "content" array within your tailwind.config.json, or if you're using something like Vite, it requires you to import tailwindcss within your vite.config.ts file, as following -

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

tailwind.config.ts -

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

Note - The '...' within "theme" above just means your usual things within the rest of the object, my only aim is to bring your attention to the "content" array here.