How to use max-width breakpoints in UnoCSS

Question

I use md:bg-pink and it become like this: enter image description here

This is my unocss.config.ts:

export default defineConfig({
  shortcuts: [
    {...},
  ],
  rules: [],
  theme: {
    colors: {...},
    screens: {
      md: {'max': '1800px'}
    },
    breakpoints: {
      md: {'max': '1800px'}
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
  ],
});

I want to set max-width to replace the default min-width, but it doesn't work

Answer 1

Short answer: You must use lt- wherever you need to apply less then breakpoint.

Long answer: Your config is still the same. You may want to change actual px value, tho. So if md is 1800px than you may use it as 1800px(included) and more OR you may use the same 'md' as 1800px(not included) and less (better set to 1800.1px instead).

theme: {
  breakpoints: {
    md: '1800.1px',
  },
}

Then to apply styles at this breakpoint (i.e. 1800px) you should write next:

/* md => md and more; lt-md => less than md (not equal) */
@screen lt-md {<your stiles>}

additional info: https://unocss.dev/presets/wind

Applying inline styles you should follow this:

<div styles="<md:color-green400">

additional info: https://windicss.org/utilities/general/variants.html