Search code examples
reactjstailwind-css

Tailwind not rendering after installation

After I've followed the installation process for Tailwind per their website, I ran npm run dev and the design is still not rendering.

The steps I made:

1: npm install -D tailwindcss

2: npx tailwindcss init

After that, I changed to tailwind.config to:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Along with the my index.css file to be:

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

And finally my App.jsx:

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
     <h1 className="text-3xl bg-red-500 font-bold underline">
    Hello world!
  </h1>
    </>
  )
}

After doing all of this it should be working but the color of bg-red-500 is not showing indicating that tailwind is not working.

Here is an image of how my dir is setup:

enter image description here

Solution

  • You need to include .jsx files in the Tailwind configuration.

    /** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

    In addition, install postcss and autoprefixer:

    npm install -D postcss autoprefixer
npx tailwindcss init -p