CODEWITHSUNDEEP
cssreactjswebpacktailwind-css
Odunsi
Odunsi

Reputation: 490

Tailwind class doesn't take effect

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

Upvotes: 8

Views: 31436

Answers (4)

Ryan Didevar
Ryan Didevar

Reputation: 678

I had the same problem recently and I was wondering why. Then I noticed that I'm working on Typescript and my file extension is .jsx instead of .tsx and after I fixed it, it worked properly. I recommend you to check the file extension.

Upvotes: 0

Ëuclïdës Ďŕÿ'C
Ëuclïdës Ďŕÿ'C

Reputation: 395

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!

Upvotes: 5

Odunsi
Odunsi

Reputation: 490

I found the problem. It was from my webpack config for CSS loader. I noticed when I added my own stylesheet, not all the rules were applied.

{
        loader: "css-loader",
        options: {
          modules: true,
          importLoaders: 1,
          sourceMap: true
        }
      }

I had to remove all the options. I don't even know why I added it at first. Tailwind CSS now works.

Upvotes: 3

upender
upender

Reputation: 180

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)

Upvotes: 4

Related Questions