Tailwindcss not working for react project

I am trying to integrate tailwind to my React-typescript project created with vite. Followed Tailwind configuration guide step by step, but I am now getting this warning:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

This is my directory structure:

│   .eslintrc.json
│   .gitignore
│   .prettierrc
│   index.html
│   package-lock.json
│   package.json
│   postcss.config.cjs
│   tailwind.config.cjs
│   tsconfig.json
│   tsconfig.node.json
│   vite.config.ts
│
├───.vscode
│       settings.json
│
├───public
│       litaci-logo.png
│       litaci.png
│
└───src
    │   App.tsx
    │   index.css
    │   main.tsx
    │   vite-env.d.ts
    │
    ├───components
    │       Navbar.tsx
    │
    ├───containers
    │       Page.tsx
    │
    ├───pages
    │       Root.tsx
    │
    └───store

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js, jsx, ts, tsx}',
    './src/pages/**/*.{js, jsx, ts, tsx}',
    './src/components/**/*.{js, jsx, ts, tsx}',
    './src/containers/**/*.{js, jsx, ts, tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

It was working fine before I added .prettierrc file. I followed this github discussion but to no avail. Tailwindcss class is not working at all.