Режим атрибуции #

⚠️ Attributify недоступен с svelte-windicss-preprocess.

С помощью этой функции вы можете писать классы windi в атрибутах html.

Что касается размера css, размер css может быть немного увеличен, но при сжатии gzip влияние минимально.

Attributify включен по умолчанию, для начала включите его в конфигурации windi.

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  attributify: true,
})

И используйте их как хотите:

<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>

Синтаксис #

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

Примеры #

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"

Префикс #

Если вас беспокоит конфликт имен, вы можете добавить собственный префикс в режим атрибуции:

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>

Нормализация #

На самом деле у вас есть две парадигмы программирования на выбор:

1. Группировка по утилитам

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

2. Группировка по вариантам

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

И, конечно, вы также можете смешивать их, но я лично не рекомендую. Просто выберите один и придерживайтесь его. Вы обнаружите, что ваш код становится понятнее.

Утилиты #

Справочник: Утилиты Attributify