Pi Coding Agent
A terminal-based coding agent
Frontend Development Tool
Summary
UseClassy is a Vite plugin and VS Code extension that lets you split Tailwind CSS variant modifiers into separate class attributes (e.g., class:hover, class:dark, class:lg) instead of cramming them all into one long class string, dramatically improving readability.
Highlights
- Replaces verbose Tailwind variant prefixes with separate class attributes like class:hover, class:dark, class:lg for cleaner markup
- Works as a Vite plugin that generates an output file consumed by Tailwind's content scanning pipeline
- Supports complex selectors including arbitrary variants like [&>svg], :has(), and :not() with nested variant combinations
- Provides VS Code IntelliSense support via tailwindCSS.classAttributes configuration
- Compatible with both Tailwind CSS v4 (@source directive) and v3 (content array)
auto-generated
Context
Audience
Frontend developers using Tailwind CSS who want cleaner, more maintainable markup with complex variant combinations
DomainFrontend Development / CSS Frameworks
Formatopen source tool with documentation
Accessfree, open source via npm
Source Overview
Make your Tailwind variant modifiers fast, simple, and much more readable.
Topics
Related
Tailwind CSSViteVS Code ExtensionsTailwind CSS v4CSS-in-JS alternatives
