Why aren't the Tailwind classes taking effect in my Vite React project?

Question

I have a Vite React project that uses Tailwind via PostCSS. However, none of the classes are reflecting the the localhost. Below are the files in the project:

postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

App.js:

const App = () => {
  return (
    <div className="App">
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  )
}
export default App

This was all done following the instructions in the Tailwind documentation at https://tailwindcss.com/docs/installation/using-postcss.

Why doesn't it work?

Answer 1

You should update the tailwind.config.js file to include .jsx files:

{html,js} => {html,js,jsx}

module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}