vite-variant-group

Enable Windi CSS / UnoCSS style variant groups (e.g., hover:(text-red-500 bg-blue-500)) in your Vite project using Tailwind CSS.

This package provides two main utilities:

1. Vite Plugin: Handles .vue, .html, and .scss files during development and build.
2. Tailwind Transformer: Ensures Tailwind CSS detects and generates the correct classes from your variant groups.

Features

• ✨ Variant Grouping: hover:(text-red 500 bg-blue-500) -> hover:text-red-500 hover:bg-blue-500
• 🚀 Vue & HTML Support: Works directly in class attributes.
• 🎨 SCSS Support: Works in @apply directives.
• ⚡ Lightweight: Zero runtime dependencies.

Installation

npm install vite-variant-group -D
# or
pnpm add -D vite-variant-group
# or
yarn add -D vite-variant-group

Usage

1. Configure Vite Plugin

Add the plugin to your vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteVariantGroup } from "vite-variant-group";

export default defineConfig({
  plugins: [
    vue(),
    viteVariantGroup() // Add this plugin
  ]
});

2. Configure Tailwind Content Transform

Add the transformer to your tailwind.config.ts (or .js) so Tailwind can see the expanded classes:

import { variantGroupTransformer } from "vite-variant-group";

export default {
  content: {
    files: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx,html}"],
    transform: {
      // Apply the transformer to unsupported file types or all files if needed
      // Most importantly for .vue and .html files
      DEFAULT: content => variantGroupTransformer(content),
      vue: content => variantGroupTransformer(content),
      html: content => variantGroupTransformer(content)
    }
  }
  // ... rest of your config
};

Examples

Vue / HTML

<div class="md:(text-xl text-white bg-blue-600) hover:(bg-blue-700 font-bold)">
  Content
</div>

Expands to:

<div
  class="md:text-xl md:text-white md:bg-blue-600 hover:bg-blue-700 hover:font-bold">
  Content
</div>

SCSS (@apply)

.btn {
  @apply py-2 px-4 rounded md:(text-lg p-4);
}

Expands to:

.btn {
  @apply py-2 px-4 rounded md:text-lg md:p-4;
}

License

MIT