Tail-Aid

Overview

Tail-Aid is a powerful VS Code extension designed to enhance your Tailwind CSS development experience. It provides intelligent syntax highlighting, class categorization, and organization tools to streamline your workflow.

Features

• Intelligent Syntax Highlighting: Automatically categorizes Tailwind CSS classes by their prefixes, making your code more readable and maintainable.
• Smart Class Organization: Sort your Tailwind classes by category with a single command or keyboard shortcut.
• Class Explorer: Browse and insert Tailwind classes through a convenient tree view, organized by categories.
• Hover Information: Get instant information about Tailwind classes by hovering over them in your code.

Usage

Syntax Highlighting

Tail-Aid automatically highlights Tailwind CSS classes in your code, using different colors for different categories:

• Layout (teal)
• Spacing (green)
• Typography (yellow)
• Colors (blue)
• Borders (purple)
• Effects (pink)
• And more...

Sorting Classes

You can organize your Tailwind classes by category in two ways:

1. Using the Command Palette (Ctrl/Cmd + Shift + P):
   • Type "TailAid: Sort Tailwind Classes by Category"
2. Using the keyboard shortcut:
   • Windows/Linux: Ctrl + Shift + T
   • macOS: Cmd + Shift + T

The classes will be automatically sorted following this order:

1. Layout
2. Spacing
3. Sizing
4. Typography
5. Colors
6. Borders
7. Effects
8. Animation
9. Transform
10. Interactivity
11. Accessibility

Class Explorer

Access the Tailwind Class Explorer through the VS Code sidebar to:

• Browse classes by category
• View class descriptions
• Insert classes with a single click

Hover Information

Hover over any Tailwind class in your code to see:

• Class description
• Visual preview (when available)
• Category information

Installation

1. Open VS Code.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl+Shift+X.
3. Search for "Tail-Aid".
4. Click on the Install button.

Configuration

You can customize Tail-Aid's behavior through VS Code settings:

• Enable/disable the extension
• Customize category colors
• Modify category order for sorting

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.