Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>Tailwind FoldNew to Visual Studio Code? Get it now.
Tailwind Fold

Tailwind Fold

Stivo

|
235,486 installs
| (16) | Free
Improves code readability by folding class attributes
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tailwind Fold

With Tailwind Fold, you can say goodbye to messy and hard-to-read HTML code. This extension helps improve the readability of your code by automatically "folding" long class attributes.

Features

Folding in action

By default, automatic folding is enabled, but you can customize this behavior in the settings. Quickly toggle folding using the keyboard shortcut Ctrl+Alt+A

Comparison

Format comparison

Customizable folding styles

Format comparison

Customizable opacity of unfolded class attributes

Format comparison

Extension Settings

This extension contributes the following settings:

  • tailwind-fold.autoFold: Enable/disable automatic class attribute folding
  • tailwind-fold.foldStyle: Defines folding style
  • tailwind-fold.unfoldIfLineSelected: Unfolds class attributes if line is selected
  • tailwind-fold.showTailwindImage: Show/hide the tailwind logo infront of folded content
  • tailwind-fold.foldedText: Text to show when class attributes are folded
  • tailwind-fold.foldedTextColor: Color of the text when folded
  • tailwind-fold.foldedTextBackgroundColor: Background color of the text when folded
  • tailwind-fold.unfoldedTextOpacity: Opacity of unfolded class attributes
  • tailwind-fold.supportedLanguages: Array of languages the extension is enabled for
  • tailwind-fold.foldLengthThreshold: Specifies the minimum number of characters required for a section to fold

Note

This extension folds all class attributes, even if there are no tailwind specific attributes.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft