text-red-500 works, whereas text-red-400 doesn't

[adarshSrivastava01]

Hey Tailwind Community 👋,

I have been working on a yarn monorepo setup and I've been trying to setup a react UI component library which works fine, I am using tailwind version ^3.3.3, when I am trying to export components from the packages/ui folder if I apply classes like text-center it works, if I apply class like text-red-500 this works but when I am trying to apply class like text-red-400 it does not and same goes for other variables, I have made sure that I have not made any changes to the default tailwind config file, I can see an issue posted in the issues section but some quick turnaround would be really helpful here.

[alex-krasikau]

To generate the resulting CSS, Tailwind parses files that match the Tailwind content configuration. It is quite possible, and often encountered in monorepos, that you haven't included the files where you use styles like text-red-400 or other similar styles in the content paths. In such cases, these styles will not be included in the resulting CSS bundle.

On the other hand, text-red-500 may already be used in other files that are within the content paths, which is why it might work there.

To address this issue, consider adding the UI package to your Tailwind content configuration as follows:

content: [
    "./src/**/**/*.{js,ts,jsx,tsx}",
    "../packages/ui/src/**/**/*.{js,ts,jsx,tsx}",
]

[adarshSrivastava01]

Thanks for the help @alex-krasikau this worked, I had configured the same thing 3 months back in a different workspace forgot to add it this time, also saw a Github Issue somehow aligning with this, which led me to post, thank you for the quick response.

[quick007]

@adarshSrivastava01 The github issue is a bit different, it's about tailwinds arbitrary values