Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.5 KiB

Raw Permalink Blame History

name, description

name	description
preset-attributify	Group utilities in HTML attributes instead of class

Preset Attributify

Group utilities in HTML attributes for better readability.

Installation

import { defineConfig, presetAttributify, presetWind3 } from 'unocss';

export default defineConfig({
  presets: [presetWind3(), presetAttributify()],
});

Basic Usage

Instead of long class strings:

<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"
>
  Button
</button>

Group by prefix in attributes:

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

Prefix Self-Referencing

For utilities matching their prefix (flex, grid, border), use ~:

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

<!-- After -->
<button border="~ red">Button</button>

Valueless Attributify

Use utilities as boolean attributes:

<div m-2 rounded text-teal-400 />

Handling Property Conflicts

When attribute names conflict with HTML properties:

<!-- Use un- prefix -->
<a un-text="red">Text color to red</a>

Enforce Prefix

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true,
});

Options

presetAttributify({
  strict: false, // Only generate CSS for attributify
  prefix: 'un-', // Attribute prefix
  prefixedOnly: false, // Require prefix for all
  nonValuedAttribute: true, // Support valueless attributes
  ignoreAttributes: [], // Attributes to ignore
  trueToNonValued: false, // Treat value="true" as valueless
});

TypeScript Support

Vue 3

// html.d.ts
declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    [key: string]: any;
  }
}
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any;
  }
}
export {};

React

import type { AttributifyAttributes } from '@unocss/preset-attributify';

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

JSX Support

For JSX where <div foo> becomes <div foo={true}>:

import { transformerAttributifyJsx } from 'unocss';

export default defineConfig({
  transformers: [transformerAttributifyJsx()],
});

Important: Only use attributify if uno.config.* shows presetAttributify() is enabled.

2.5 KiB Raw Permalink Blame History