Responsive Design #

Doing Responsive Design in Windi CSS is effortless. By simply adding variant prefixes like md: or lg: to the utility you want to use, the corresponding media query will be generated automatically. Try it yourself using the playground below:

When you want to apply a breakpoint variant to multiple utilities, in Windi CSS you can do that without repeating yourself by using the Variant Groups feature.

Custom Range #

By default, Windi CSS's breakpoints are designed as Mobile First.

This means unprefixed utilities (like p-1) take effect on all screen sizes, while prefixed utilities (like md:p-2) only take effect at the specified breakpoint and above.

We also provided the ability to have more control over the query range by adding the < and @ prefixes:

lg  => equal to and greater than this breakpoint
<lg => smaller than this breakpoint
@lg => exactly this breakpoint range

Breakpoints #

Customization #

You can customize your breakpoints in your windi.config.js

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  theme: {
    screens: {
      tablet: '640px',
      laptop: '1024px',
      desktop: '1280px',
    },
  },
})