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.

windi.config.ts
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:

windi.config.js
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

Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.