Best Practices Class Utilities Over Attributify

<div class="flex items-center gap-2 px2 py1 border border-base rounded">
  Content
</div>

<button class="op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!">
  Save
</button>

<div class="border-l border-base pl2">Meta</div>

<button class="flex gap-2 items-center border border-base rounded px2 py1 hover:bg-active op75">
  <span class="i-ph-arrow-clockwise-duotone"></span>
  refresh
</button>

import { defineConfig, presetIcons, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetIcons(),
    // Do not include presetAttributify() for new projects.
  ],
})

import { defineConfig, presetAttributify, presetWind4 } from 'unocss'

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