Unsupported Tailwind class - tailwind.json is empty

[kehinde-elelu]

I am using tailwind version 4.2.0, and after following the instruction for installation.

My config file has been properly set-up

My tailwind.json is still empty {}.

[ciruz]

Had the same problem:

I fixed it by setting the content option in my tailwind.config.js and run the command yarn dev:tailwind to watch for changes.

[BassJonathan]

Had the same issue. I followed @ciruz instructions and added changed the content option in the tailwind.config.js file to content: ['./**/*.{html,js}']. After running npm run dev:tailwind I had some other errors like Error: Failed to parse declaration "textDecorationLine: overline". I tried to delete the classes but with npm run dev:tailwind the css-file gets updated. To avoid that, I added "fix:tailwind": "tailwind-rn" to the scripts in the package.json file and after running npm run fix:tailwind everythig is now working. This is only a temporary fix but works for me at the moment. In addition, the settings in the content option are not efficient at all. When working with bigger react native projects, that should be changed.

[CTOverton]

@BassJonathan I used content: ['./src/**/*.{js,jsx,ts,tsx}'], for my react native code and this seemed to work without the additional issues you had.

[Desolate1998]

Spent hours trying to fix this, but still nothing. Everything says Unsupported Tailwind class which I try.
My tailwind.config.js looks like this
`module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],

}

but when I run the dev:tailwind command, I get the following.

[0] warn - The content option in your Tailwind CSS configuration is missing or empty.
[0] warn - Configure your content sources or your generated CSS will be missing styles.
[0] warn - https://tailwindcss.com/docs/content-configuration
`

[asharma-dev]

Hello everyone, Those who are having the above issues.
I checked this docs https://tailwindcss.com/docs/content-configuration

Actually, So far from the above messages, I have no src directory.
In my case, it is just App.js, screens folder, components folder.
So I just changed content property to very specific as mentioned in the docs.

content: [
'App.js',
'./screens//*.{html,js}',
'./components//*.{html,js}'
]

also in the another terminal I have hit the command yarn dev:tailwind

hope this will resolve the issue!

[asharma-dev]

Had the same problem:

I fixed it by setting the content option in my tailwind.config.js and run the command yarn dev:tailwind to watch for changes.

target specific files in the content property will resolve the issue.
Please have a look at my answer above.

[developer-ghahremani]

@BassJonathan I used content: ['./src/**/*.{js,jsx,ts,tsx}'], for my react native code and this seemed to work without the additional issues you had.

thanks dude, you survived me

[naveen1337]

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
};

it worked !

[Noble-Shiva]

@CTOverton, Thanks a ton!

[AElisee]

hello, I followed the advice of each of you but I still have the error.

📍 All my folders are at the root of my project:

components
App.js
...

📍 Here is the content of my tailwind.config.js file:

module.exports = {
content: ["./components/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
corePlugins: require("tailwind-rn/unsupported-core-plugins"),
};

📍 I also notice that tailwind.css and tailwind.json are empty

[jhiin]

Then, if you use yarn just type:

yarn run dev:tailwind

or with npm

npm run dev:tailwind

[mashwishi]

up for this issue