Tailwind Group & Clean

The ultimate VS Code extension to solve the "Tailwind Clutter" problem. It automatically folds, groups, and organizes your Tailwind CSS classes to keep your HTML clean and readable.

🚀 Features

1. Auto-Folding

Automatically hides long class strings when you are not editing them to reduce noise.

Code Demo:

<!-- Real Code (What is saved in file) -->
<div
  class="flex items-center justify-between p-4 bg-blue-500 text-white shadow-lg"
>
  ...
</div>

<!-- Visual (What you see in Editor) -->
<div class="⚡">...</div>

2. Grouping & Sorting with Virtual Separators

Organizes your classes into logical categories. New: Uses Virtual Separators! The | lines are visual decorations only. They help you read, but your saved code remains clean plain text.

Code Demo:

<!-- Before (Messy) -->
<div
  class="p-4 flex text-white bg-blue-500 items-center rounded-lg hover:bg-blue-600"
>
  <!-- After Command (Clean & Sorted) -->
  <!-- You SEE this: -->
  <div
    class="flex items-center | p-4 | text-white | bg-blue-500 | rounded-lg | hover:bg-blue-600"
  >
    <!-- But Saved File is CLEAN: -->
    <div
      class="flex items-center p-4 text-white bg-blue-500 rounded-lg hover:bg-blue-600"
    ></div>
  </div>
</div>

3. Convert to Multi-line

Transforms a long single-line class string into a readable multi-line format for easy editing.

Code Demo:

<!-- Before -->
<div class="flex items-center justify-between p-4 bg-blue-500 text-white">
  <!-- After Command -->
  <div
    class="
  flex items-center justify-between
  p-4
  bg-blue-500
  text-white
"
  ></div>
</div>

🛠 How to Use

Once installed from the Marketplace:

1. Open any HTML/JSX/TSX file.
2. Auto-Folding: Long class strings are automatically folded into ⚡ icons to reduce clutter. Hover or click to edit.
3. Group & Clean:
   • Press Ctrl+Shift+P (or Cmd+Shift+P on Mac).
   • Run: Tailwind: Group & Clean Classes.
   • Result: Classes are sorted logically and visually separated.
4. Multi-line:
   • Run: Tailwind: Convert to Multi-line to expand classes into a readable list.

⚙️ Configuration

Customize the experience in Visual Studio Code Settings: