Attributify Mode #

⚠️ Attributify is not available with svelte-windicss-preprocess.

With this feature, you can write windi classes in HTML attributes.

Regarding the issue of css size, the css size may be slightly increased, but under gzip compression, the impact is minimal.

Attributify is opt-in by default, start by enabling it in your windi config.

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  attributify: true,
})

And use them as you would like:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Syntax #

(variant[:-]{1})*key? = "((variant:)*value)*"

Examples #

sm = "bg-blue-200 hover:bg-blue-300"
sm:hover = "bg-blue-200 dark:bg-blue-300"
sm-hover = "bg-blue-200 dark:bg-blue-300"

p = "x-4 y-2 md:y-3"
md:bg = "blue-300 dark:blue-400"
md-bg = "blue-300 dark:blue-400"

Prefix #

If you are concerned about naming conflicts, you can add a custom prefix to the attributify mode by:

export default {
  attributify: {
    prefix: 'w:',
  },
}

<button
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Button
</button>

Normalization #

You actually have two programming paradigms to choose from:

1. Grouping based on utilities

   class=...
   bg=...
   text=...
   border=...
   

2. Grouping based on variants

   class=...
   sm=...
   md=...
   dark=...
   

And of course, you can mix them together, but we don't recommend it because it reduces the clarity of your code.

Utilities #

Reference: Attributify Utilities