[v4] No way to discard false-positive classes (`blocklist` option)

[silverwind]

What version of Tailwind CSS are you using?

4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

any

What version of Node.js are you using?

any

What browser are you using?

any

What operating system are you using?

any

Reproduction URL

not relevant

Describe your issue

In v4, one can use the blocklist option to eliminate false-positives classes in the compiled output, but with the v4 CSS config, this seems no longer be possible.

I think it's very important to have this option back to reduce bundle size.

[silverwind]

It looks like this is still possible when using a JS/TS config file. I will try that later. Personally I strongly dislike doing configuration in CSS.

https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
#14556

[tcastelly]

Despite of having a bigger build without blocklist, I also have a lot of side effects. I have a third Tailwind widgets library included in my main project, also using Tailwind.

---

From my third library it works as expected, I don't have the right border.

<AComponent class="border border-r-0" />

But when I import this component in my main project it's not working anymore, I have the unexpected right border. I guess because I use border in this project and I have duplicated classes.

The @config directive in the css file works, I'm wondering if blocklist is now part of deprecated features.

[philipp-spiess]

@silverwind Yeah blocklist inside a JavaScript based config file is still supposed to work. Do you see any issues with that? Also sorry for the late response here.

@tcastelly Do you mind opening a new GitHub issue with a reproduction repository please? This does seem unrelated to the blocklist option

[silverwind]

@silverwind Yeah blocklist inside a JavaScript based config file is still supposed to work

I think this is a docs-only issue then. The v4 docs have no information regarding the JavaScript config file. The only reference in the docs is here, but there are no details on which properties are supported.

Should one assume that all properties supported in v3 JS config are also supported in v4 JS config?

[philipp-spiess]

@silverwind We support all of the features except corePlugins, safelist and separator. These are mentioned in our docs though but yes we don't really want to mention the old v3 syntax much to ensure we don't confuse new users: https://tailwindcss.com/docs/functions-and-directives#config-directive

Seems like this resolves your original issue so going to mark this as closed but thanks for reaching out 👍