You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, when a class is added to the blocklist in tailwind.config.js, Tailwind CSS IntelliSense disables both lint diagnostics and hover/completion support. While blocking class generation is intentional and necessary, it would be helpful if we could optionally preserve hover documentation and IntelliSense info for such classes — especially for educational and reference purposes.
We propose adding a setting to optionally enable this behavior.
Use Case
✅ Real-world scenario
We maintain a primary Tailwind CSS library that provides a set of common utility classes and design tokens. In our platform architecture, multiple extensions or micro-frontends consume this primary library.
In some extension projects:
We reuse utility classes defined in the main Tailwind library (like text-title, grid-cols-layout, container, etc.)
However, we do not want these extensions to regenerate the same classes, to avoid style duplication and bloat
So we add these classes to the blocklist in the extension's tailwind.config.js
This correctly prevents class output ✅
But as a side effect:
Hover info and IntelliSense are also disabled, even though those classes are used and valid in context
Developers no longer see what these classes do — making development harder and more error-prone
🧠 What we want
We still want to:
✅ Prevent output for these blocklisted classes
✅ Suppress any lint warnings via "tailwindCSS.lint.usedBlocklistedClass": "ignore"
✅ But retain hover and IntelliSense info for better developer UX
Proposal
Introduce a setting in VSCode (via the Tailwind IntelliSense extension), such as:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Currently, when a class is added to the
blocklist
intailwind.config.js
, Tailwind CSS IntelliSense disables both lint diagnostics and hover/completion support. While blocking class generation is intentional and necessary, it would be helpful if we could optionally preserve hover documentation and IntelliSense info for such classes — especially for educational and reference purposes.We propose adding a setting to optionally enable this behavior.
Use Case
✅ Real-world scenario
We maintain a primary Tailwind CSS library that provides a set of common utility classes and design tokens. In our platform architecture, multiple extensions or micro-frontends consume this primary library.
In some extension projects:
text-title
,grid-cols-layout
,container
, etc.)blocklist
in the extension'stailwind.config.js
But as a side effect:
🧠 What we want
We still want to:
"tailwindCSS.lint.usedBlocklistedClass": "ignore"
Proposal
Introduce a setting in VSCode (via the Tailwind IntelliSense extension), such as:
Beta Was this translation helpful? Give feedback.
All reactions