UseClassy transforms Tailwind variant attributes (class:hover="...") into standard Tailwind classes (hover:...). This allows for cleaner component markup by separating base classes from stateful or responsive variants.
- Transforms attributes like
class:hover="text-blue-500"to standardclass="hover:text-blue-500". - Supports chaining modifiers like
class:dark:hover="text-blue-500". - Works seamlessly with React (
className) and Vue/HTML (class). - Integrates with Vite's build process and dev server. No runtime overhead.
- Smart Caching: Avoids reprocessing unchanged files during development.
- Runs before Tailwind JIT compiler with HMR and TailwindMerge support.
# npm
npm install vite-plugin-useclassy --save-dev
# yarn
yarn add vite-plugin-useclassy -D
# pnpm
pnpm add vite-plugin-useclassy -DAdd useClassy to your Vite plugins. It's recommended that you place it before Tailwind or other CSS processing plugins.
// vite.config.ts
import useClassy from 'vite-plugin-useclassy';
export default {
plugins: [
useClassy({
language: 'react', // or 'vue'
// Optional: Customize the output directory. Defaults to '.classy'.
// outputDir: '.classy',
// Optional: Customize output file name. Defaults to 'output.classy.html'.
// outputFileName: 'generated-classes.html'
// Optional: Enable debugging. Defaults to false.
// debug: true,
}),
// ... other plugins
],
};// Input (using class:variant attributes)
<button
className="px-4 py-2 rounded bg-blue-600 text-white"
class:hover="bg-blue-700 scale-105"
class:focus="ring-2 ring-blue-300"
class:disabled="opacity-50 cursor-not-allowed"
class:dark="bg-sky-700"
/>
// Output (after transformation by the plugin)
<button
className="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 hover:scale-105 focus:ring-2 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-sky-700 dark:hover:bg-sky-800"
/><template>
<button
class="px-4 py-2 rounded bg-blue-600 text-white"
class:hover="bg-blue-700 scale-105"
class:focus="ring-2 ring-blue-300"
class:disabled="opacity-50 cursor-not-allowed"
class:dark="bg-sky-700"
/>
<!-- Output -->
<button
class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 hover:scale-105 focus:ring-2 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-sky-700 dark:hover:bg-sky-800"
/>
</template>Add the output.classy.html as a source file in your tailwind config.
For Tailwind 4
/* your-main-css-file.css */
@import "tailwindcss";
@source "./.classy/output.classy.html";For Tailwind 3 you need to add the following to your Tailwind config.
"content": [
// ... other content paths
"./.classy/output.classy.html"
]Add the following to your editor settings to enable IntelliSense for UseClassy.
{
"tailwindCSS.classAttributes": [
...other settings,
"class:[\\w:-]*"
]
}Enable debugging by setting debug: true in the plugin options. This will log detailed information about the plugin's operation to the console.
useClassy({
debug: true,
});- Only processes files with
.vue,.tsx,.jsx,.htmlextensions. - Does not process files in the
node_modulesdirectory. - Does not process files in
.gitignoredirectories. - Does not process virtual modules.
Contributions are welcome! Please open an issue or submit a pull request.
MIT