Search code examples
reactjstypescripttailwind-cssvite

Tailwind css is not being applied - React

I am working on a react application created using Vite. I am trying to use tailwind and followed the steps mentioned in the official docs of tailwind. But my css is not being applied. I am using react with typescript (tsx). Can someone please have a look at my code snippets and suggest me something that I may have missed in my configuration?

Here's a list of packages that I am using.

"autoprefixer": "^10.4.16",
"tailwindcss": "^3.3.6"
"postcss": "^8.4.32",
"react": "^18.2.0",
"ts-node": "^10.9.1",
"typescript": "^5.3.2",
"vite": "^5.0.0"

here is my tailwind.config.js

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

and my postcss.config.js

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

I have included tailwind in my index.css as follows:

  /* ./src/index.css */
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

But I am unable to get any css applied when I run my app. i.e. in the following h1 tag.

<h1 className="text-3xl font-bold underline">
    Hello world...!
</h1>

I would appreciate your help and suggestions.

Solution 
  • postcss.config.js

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