Interactive styling & code-folding for a Next-Gen VSCode Extension

[alexchexes]

I recently discovered Tailwind Fold, which folds long class attributes to improve code readability. This gave me an idea: what if the official Tailwind CSS VSCode extension introduced interactive styling, similar to Chrome DevTools, directly in the editor?

Imagine adding a utility class like flex, then clicking a small icon to visually adjust flex options (direction, alignment, etc.), with the extension automatically adding or removing Tailwind classes accordingly. The same could apply to grids, margins, paddings, colors, and other styles - going beyond what’s possible in Chrome DevTools. Paired with a real-time setup like Vite + HMR, this would create a truly seamless and interactive way to style HTML right from the editor.

Additionally, the extension could incorporate class folding similar to Tailwind Fold - but strictly for Tailwind classes - to keep code clean while maintaining readability.

A further enhancement would be to display the combined final styles of all utility classes for an element, rather than showing the CSS for only a single class when hovering. This would help developers see exactly how classes interact and override each other.

I’d love to hear thoughts on this and how feasible it would be to implement, given the current capabilities/limitations of VSCode.