Hiding classes in VS Code

Feb 3, 2023

Learn how the Tailwind Fold VS Code extension hides long class lists in your JSX and HTML files for a cleaner look, then reveals them again when you click.

~~~

I’ve been using this VS Code extension lately, called Tailwind Fold.

Using this extension you can decide to hide all classes by default in your JSX and HTML files, and only show the classes when you click on them:

VS Code editor with Tailwind classes hidden by the Tailwind Fold extension, showing cleaner code with folded class attributes

This was the original file:

VS Code editor showing the original file with all Tailwind CSS classes visible before using the Tailwind Fold extension

As you can see it looks cleaner.

I keep this extension inactive by default, so I can see all classes, but when I want to have a “clean look” I have a shortcut that hides all classes.

Pretty handy.

Tagged: Tools · All topics

~~~