# UseClassy

Readable utility CSS. No horizontal scroll.

A Vite plugin (`vite-plugin-useclassy`) that turns variant attributes (`class:hover`, `className:focus`, `class:sm:hover`) into normal Tailwind CSS and UnoCSS classes. No runtime. Place it before your CSS engine.

Use it when writing or refactoring Vue, React, Svelte, Blade, or HTML that uses Tailwind/UnoCSS hover, focus, responsive, dark, or group variants.

- Website: https://useclassy.com/
- Docs: https://useclassy.com/docs.md
- Agent skill: https://useclassy.com/skill.md
- GitHub: https://github.com/jrmybtlr/useclassy

## Quick start

```bash
npm i -D vite-plugin-useclassy
npx vite-plugin-useclassy init
```

`init` patches Vite and your CSS engine, and installs agent skills by default so coding agents keep writing `class:hover` instead of `hover:` prefixes. Pass `--no-skills` to skip agent files.

See the [docs](https://useclassy.com/docs.md) for Usage, Vite, Tailwind, UnoCSS, IntelliSense, and the agent skill.