css classes in v3 not working at all in v4

[ist34com]

Hello,

We were using Tailwind version 3.2.4 on our React based e-commerce project where we have no access to the backend infrastructure but only creating a theme using nextJS using their API.

However we would unable to deploy our themes due to the timeout on the backend side and we could able to solve this problem by upgrading our Tailwind version to the 4 and theme successfully deployed.

But now all the classes that were working on 3.2.4 version such as "flex-none w-3/5", "md:w-1/2 mb-4 md:mb-0", not working at all on v.4 version.

Since customer has around 2000 item descriptions that are entered into the database using Tailwind classes, we have to make those css classes working as how it been in 3.2.4 version, now in v.4 version as well.

What is the reason of those css classes not actively working now in v4 version ?

Is there any workaround we can apply to make them working neat as been before ?

Thank you very much.

[wongjn]

If the class names aren't available in the file system, did you use safelist to generated the class names in v3? If so, you'd need to do the same in v4.

[ist34com]

These were generic Tailwing classes, we didn't create those classes manually anyhow in the previous Tailwind version.

Do we need to move those generic Tailwind classes now manually to the version 4 using safelist ?

[wongjn]

Tailwind v3 and v4 both only generate class names they see in the files they scan. You could debug v4 to ensure it is scanning at least the same files as you'd expect in v3 by setting DEBUG=* environment variable and then looking in the generated log file (for v4.1.6+).