🎩
Use
Classy

Automatically append attributes to separate media queries, hover states, and other styles. It's fast, simple, and much more readable.

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 ring-zinc-700"
class:lg="p-6 text-base mt-4"
class:group-hover="bg-blue-100 shadow-lg border-blue-200"
class:focus-within="ring-2 ring-blue-500"
class:[&>svg]="size-6 fill-blue-700 stroke-blue-700"
class:dark:[&>svg]="fill-blue-200 stroke-blue-200"
class:[&:has(>svg)]="pl-10 pr-2 fill-blue-500"
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 dark:ring-zinc-700lg:p-6 lg:text-base lg:mt-4group-hover:bg-blue-100 group-hover:shadow-lg group-hover:border-blue-200focus-within:ring-2 focus-within:ring-blue-500[&>svg]:size-6 [&>svg]:fill-blue-700 [&>svg]:stroke-blue-700dark:[&>svg]:fill-blue-200 dark:[&>svg]:stroke-blue-200[&:has(>svg)]:pl-10 [&:has(>svg)]:pr-2 [&:has(>svg)]:fill-blue-500[&:not(:has(>svg))]:pl-4 [&:not(:has(>svg))]:pr-3 [&:not(:has(>svg))]:text-zinc-100 [&:not(:has(>svg))]:underline"
1

Install

npm install vite-plugin-useclassy --save-dev
2

Vite

Add the following to your Vite configuration, making sure UseClassy is listed as the first plugin.

import useClassy from 'vite-plugin-useclassy';
{
plugins: [
useClassy({
language: 'vue',
}),
// ... other plugins
],
}
3

Tailwind

UseClassy creates a ./.classy/output.classy.html file. Import this file into your Tailwind CSS configuration.

{
@import "tailwindcss";
...update to your file location
@source ".classy/output.classy.html";
...other config
}

For Tailwind 3, add the following to your Tailwind config.

content: [
// ... other content paths
".classy/output.classy.html"
]

4

Intellisense

Add the following to your VSCode settings to enable IntelliSense for UseClassy.

{
"tailwindCSS.classAttributes": [
...other settings,
"class:[\\w:-]*",
]
}