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:

CSS

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.

CSS

Custom Range

By default, Windi CSS's breakpoints is 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 controls over the query range by adding the < and @ prefix:

lg  => greater or equal than this breakpoint
<lg => smaller than this breakpoint
@lg => exactly this breakpoint range
CSS

Breakpoints

Default< prefixed@ prefixed
sm(min-width: 640px)(max-width: 639.9px)(min-width: 640px) and
(max-width: 767.9px)
md(min-width: 768px)(max-width: 767.9px)(min-width: 768px) and
(max-width: 1023.9px)
lg(min-width: 1024px)(max-width: 1023.9px)(min-width: 1024px) and
(max-width: 1279.9px)
xl(min-width: 1280px)(max-width: 1279.9px)(min-width: 1280px) and
(max-width: 1535.9px)
2xl(min-width: 1536px)(max-width: 1535.9px)(min-width: 1536px)

Customization

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

// windi.config.js
import { defineConfig } from 'windicss/helpers'

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