Skip to content

stivoat/tailwind-fold

Repository files navigation

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.