Feature request: toggle show/hide classnames

[julienma]

Hey,
Tailwind is awesome. A minor downside though is that my HTML is much denser, less easy to scan, because of all the new class names.

I'd like a way to collapse all Tailwind classes, while keeping visible custom classes, such that it becomes easier to scan when I need to focus on my HTML. A keyboard shortcut to toggle visibility would be great (I think), e.g.

turn this:

<div class="flex items-start self-center mt-3">
  <div class="flex items-center h-5">
    <input name="yo" type="checkbox" class="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-indigo-500 my-custom-class" value="1">
  </div>
</div>

to this:

<div class="•••">
  <div class="•••">
    <input name="yo" type="checkbox" class="••• my-custom-class" value="1">
  </div>
</div>

What do you think?

[bradlc]

Hey @julienma thanks for the suggestion! I have played with this idea in the past and I don't think it's currently possible to implement it well in VS Code. Going to close this as I don't think that's going to change any time soon.

[julienma]

Ha, ok, thanks Brad.

[mtbaqer]

Hey @bradlc, was wondering if we could reopen this issue given the new feature PR?
To work as a place to discuss ideas and concerns regarding implementing the feature, now that we potentially have a good way of doing it.