Write Tailwind and UnoCSS that's easier to read, review and debug. Made for agents and humans.
class="p-6 bg-white rounded-xl shadow-lg border"class:hover="bg-blue-50 scale-105 shadow-xl"class:focus="ring-2 ring-blue-500 ring-offset-2"class:dark="bg-zinc-800 text-white border-zinc-700"class:@md="p-6 text-base mt-4"class:sm:hover="underline"class:group-hover="bg-blue-100 shadow-lg border-blue-200"class:focus-within="ring-2 ring-blue-500"class:dark:[&>svg]="fill-blue-200 stroke-blue-200"class:[&:not(:has(>svg))]="pl-4 pr-3 text-zinc-100 underline"
class="p-6 bg-white rounded-xl shadow-lg borderhover:bg-blue-50 hover:scale-105 hover:shadow-xlfocus:ring-2 focus:ring-blue-500 focus:ring-offset-2dark:bg-zinc-800 dark:text-white dark:border-zinc-700@md:p-6 @md:text-base @md:mt-4sm:hover:underlinegroup-hover:bg-blue-100 group-hover:shadow-lg group-hover:border-blue-200focus-within:ring-2 focus-within:ring-blue-500dark:[&>svg]:fill-blue-200 dark:[&>svg]:stroke-blue-200[&:not(:has(>svg))]:pl-4 [&:not(:has(>svg))]:pr-3 [&:not(:has(>svg))]:text-zinc-100 [&:not(:has(>svg))]:underline"
npm install vite-plugin-useclassy --save-dev
npx vite-plugin-useclassy init --language vue --with-skills
# From a clone of github.com/jrmybtlr/useclassycode --install-extension ./vscode-useclassy Syntax highlighting for className:@md and similar modifiers. Reload the window after install.