Tailwind class doesn't take effect

Question

I created a react setup for a little project and decided to add tailwind. It was successful but when I add the class to the components, I don't see any change.

This is the link to the repository

Answer 1

If you know that you've configured Tailwind and added the right settings and presets, maybe you need to add this:

module.exports = {
  content: [
    './public/index.html', <-
  ],
}

or this, if you're using ReactJS:

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}'
  ],
  // ...
}

Within your tailwind.config.js file.

You also can learn/read more about it on: https://tailwindcss.com/docs/content-configuration, that worked perfectly for me!

Answer 2

Everything seems fine. Once delete the node modules and package.lock.json file and install node modules then start the server.

Also, there is no need to import tailwind.css in App.js. Just main.css is enough as we are already appending all the styles to main.css (check scripts in package.json)