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:
- Using the Command Palette (Ctrl/Cmd + Shift + P):
- Type "TailAid: Sort Tailwind Classes by Category"
- Using the keyboard shortcut:
- Windows/Linux:
Ctrl + Shift + T
- macOS:
Cmd + Shift + T
The classes will be automatically sorted following this order:
- Layout
- Spacing
- Sizing
- Typography
- Colors
- Borders
- Effects
- Animation
- Transform
- Interactivity
- 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 over any Tailwind class in your code to see:
- Class description
- Visual preview (when available)
- Category information
Installation
- Open VS Code.
- 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
.
- Search for "Tail-Aid".
- 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.