I installed react using

npx create-react-app example

Installed tailwind using the framework guide given for create react app
link

Basic styling works fine, although hovers and dropdowns using tailwind classNames do not work.

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@headlessui/react": "^2.1.2",
    "@heroicons/react": "^2.1.4",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.2",
    "axios": "^1.7.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^4.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/input.css -o src/output.css"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "autoprefixer": "^10.4.19",
    "daisyui": "^4.12.10",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    './node_modules/@headlessui/react/**/*.js',
  ],
  theme: {
    extend: {},
    },
  },
  plugins: [
    require('daisyui'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

index.css has been included in App.js.
I haven’t included any other styling so it is not a conflict issue.