@unocss/transformer-variant-group

What is @unocss/transformer-variant-group?

@unocss/transformer-variant-group is a transformer for UnoCSS that allows you to group variant utilities together, making your CSS more concise and easier to read.

What are @unocss/transformer-variant-group's main functionalities?

Grouping Variants

This feature allows you to group multiple variant utilities together. In this example, the `hover` and `focus` variants are grouped to apply different background and text colors when the element is hovered or focused.

```html
<div class="hover:(bg-blue-500 text-white) focus:(bg-red-500 text-black)">
  Hover or focus on me!
</div>
```

Nested Variants

This feature allows you to nest variants within responsive breakpoints. In this example, the `sm:hover` and `md:focus` variants are nested to apply different styles based on screen size and interaction state.

```html
<div class="sm:hover:(bg-green-500 text-white) md:focus:(bg-yellow-500 text-black)">
  Responsive hover and focus!
</div>
```

Other packages similar to @unocss/transformer-variant-group

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. It does not natively support grouping variants in the same way as @unocss/transformer-variant-group, but it offers a wide range of utilities and plugins for extended functionality.

windicss

Windi CSS is a next-generation utility-first CSS framework that is highly optimized for speed. It offers similar functionalities to Tailwind CSS and includes features like variant grouping through its own syntax, making it comparable to @unocss/transformer-variant-group.

README

@unocss/transformer-variant-group

Enables the variant group feature of Windi CSS for UnoCSS.

Install

npm i -D @unocss/transformer-variant-group

import transformerVariantGroup from '@unocss/transformer-variant-group'
// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

Usage

<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Will be transformed to:

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>

License

MIT License © 2021-PRESENT Anthony Fu