Reactjs – Tailwind classes not applied

I’ve build an app using create-react-app and then installed tailwindcss and postcss. I’ve followed the config for applying tailwind but my classes still aren’t being applied. I have tried specifying the files in the config but it’s still picking up:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/App.jsx",
    "./src/*.{js,jsx,html}",
    "./src/**/*.{js,jsx,html}",
    "./src/components/**/*.{js,jsx,html}",
  ],
  theme: {
  },
  plugins: [],
}

this is the index.css:

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

and this is the src/App.jsx where I apply the class:

import React from 'react';

function App() {
  return (
    <div className='App'>
      <div className='flex flex-col'>
        <div className='flex bg-black'>
          <span>How to find us</span>
        </div>
        <div className='flex'>
          <Component />
        </div>
      </div>
    </div>
  );
}

export default App;

I have run npx tailwindcss -i ./src/index.css -o ./dist/output.css and have restarted the server, cleared cache and uninstalled and reinstalled tailwind but it still isn’t working. Is there something I have missed?