Preset Attributify

Acesta activează modul attributify pentru alte preset-uri.

Codul Sursă

Instalare

pnpm

pnpm add -D @unocss/preset-attributify

yarn

yarn add -D @unocss/preset-attributify

npm

npm install -D @unocss/preset-attributify

bun

bun add -D @unocss/preset-attributify

import presetAttributify de la '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* opțiuni preset */ }),
    // ...
  ],
})

TIP

Acest preset este inclus în pachetul unocss, îl puteți importa și de acolo:

import { presetAttributify } de la 'unocss'

Modul Attributify

Imaginați-vă că aveți acest buton folosind utilitățile Tailwind CSS. Când lista devine mai lungă, devine foarte greu de citit și întreținut.

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

Cu modul attributify, puteți separa utilitățile în atribute:

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

De exemplu, text-sm text-white ar putea fi grupat în text="sm white" fără a duplica același prefix.

Auto-referință Prefix

Pentru utilități precum flex, grid, border, care au utilități identice cu prefixul, este furnizată o valoare specială ~.

De exemplu:

<button class="border border-red">Button</button>

Poate fi scris ca:

<button border="~ red">Button</button>

Attributify fără valoare