tailwind v4 features clarification

[flozero]

There are a few elements in the blog article about the alpha version that I have some questions about:

• In the document, you're saying safelists can't force classes to be added, but I believe this is a typo, isn't it? In v3, this is the current behavior. I'm asking because it's actually really important to be able to handle responsive classes for component libraries when they can't be used from outside and are defined dynamically.
• You said the content is automatic, but let's say you have a library of components where you want Tailwind to have a look at it. Will the new engine be smart enough to detect these?

Thank you again for your work!

Have a great week!

[adamwathan]

Hey! Best way to keep up with v4 stuff until we write stuff up in more detail is the changelog and associated PRs:

https://github.com/tailwindlabs/tailwindcss/blob/next/CHANGELOG.md

The new @source directive is what you're looking for for explicitly registering paths that aren't picked up automatically for example:

#14078

In the document, you're saying safelists can't force classes to be added, but I believe this is a typo, isn't it?

No, that's from the roadmap section of the post where we are listing things that aren't done yet in v4. So in v4 there is no safelist/blocklist support yet, but we'll figure it out before the final release.

Easy solution I still prefer is to just list the classes you want to safelist in some file somewhere that Tailwind scans. In v3 you can use regular expressions and stuff but I really think that's an anti-pattern, we'll probably have to bring it back for backwards compatibility but I really discourage it.

[flozero]

It makes sense for the @source thanks I will try :)

Agree with you. So you are saying the safelist will be "moved" to the @source basically right?

Thank you again for the work !

[ic-768]

Our app uses an in-house UI library, with classes that are programmatically created based on user input, like
bg-${color}-${shadeColorIntensity} border-${color}-${shadeColorIntensity}

I used to be able to safelist all the classes by using a regex as you mentioned. However, now it seems my best bet is to copy paste hundreds of permutations of classes if I want to upgrade to tailwind v4.