UnoCSS arbitrary breakpoints

Question

How can I use arbitrary breakpoints in UnoCSS?

I'm trying the regular tailwind class (https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints):

min-[780px]:flex-row

But it's not applying. I'm using UnoCSS Wind preset about which there's some info here: https://unocss.dev/presets/wind

Answer 1

custom rules in UnoCSS for arbitrary breakpoints involves using dynamic rules with regular expressions

// uno.config.js or unocss.config.js
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    // rule for arbitrary breakpoints...
    [/^min-w-(\d+)px:(.*)$/, ([, minWidth, className]) => {
      return {
        [`@media (min-width: ${minWidth}px)`]: {
          [`.${className}`]: { /* your CSS here . like..>*/ display: 'flex },
        },
      }
    }],
  ],
})

Custom Breakpoints in HTML

<div class="min-[780px]:flex-row ...">
  <!-- flex row on screens wider than 780px... -->
</div>