Can't install tailwindcss

[ninoespina36]

I've followed this source for setup: https://dev.to/hridoypartho/set-up-tailwind-css-with-vite-react-app-and-yarn-2ge2

I created tailwind.css and imported import "./tailwind.css"; to app/index.tsx

tailwind.config.js:

export default {
  content: ["./app/index.html", "./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

But style classes are not being loaded, and also warning is also showing:

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.

Did I miss anything? I've tried to remove @mui/joy from every file including app/index.tsx and replaced it with tailwindcss but unfortunately it doesn't work.

postcss.config.js

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

package.json

{
  "name": "root",
  "version": "0.0.0",
  "packageManager": "[email protected]",
  "private": true,
  "type": "module",
  "workspaces": [
    "app",
    "db",
    "edge",
    "scripts",
    "server"
  ],
  "scripts": {
    "postinstall": "husky install && node ./scripts/post-install.js",
    "start": "yarn workspace app start",
    "lint": "eslint --cache --report-unused-disable-directives .",
    "test": "vitest",
    "build": "yarn workspaces foreach -tiA run build",
    "deploy": "yarn workspace edge deploy"
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.11.0",
    "@emotion/eslint-plugin": "^11.11.0",
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@types/eslint": "^8.56.2",
    "@types/styled-components": "^5.1.34",
    "@typescript-eslint/eslint-plugin": "^7.0.1",
    "@typescript-eslint/parser": "^7.0.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "graphql": "^16.8.1",
    "happy-dom": "^13.3.8",
    "husky": "^9.0.11",
    "postcss": "^8.4.47",
    "prettier": "^3.2.5",
    "react": "^18.2.0",
    "relay-config": "^12.0.1",
    "tailwindcss": "^3.4.14",
    "typescript": "~5.3.3",
    "vite": "~5.1.2",
    "vitest": "~1.2.2"
  },
  "prettier": {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "trailingComma": "all",
    "bracketSpacing": true,
    "bracketSameLine": false,
    "arrowParens": "always",
    "endOfLine": "lf"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/material": "^6.1.6",
    "@mui/x-date-pickers": "^7.20.0",
    "@radix-ui/themes": "^3.1.4",
    "dayjs": "^1.11.13",
    "process": "^0.11.10",
    "styled-components": "^6.1.13"
  }
}