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',
    },
  },
})