Breakpoints

Set-up reusable responsive breakpoints.

Define your media at-rules in the media object. You can add as many as you need.

export const { styled, css } = createStitches({
  media: {
    bp1: '(min-width: 640px)',
    bp2: '(min-width: 768px)',
    bp3: '(min-width: 1024px)',
  },
});

Once configured, you can apply different variants at different breakpoints.

In the example below, we apply the violet color variant at the bp2 condition.

const Button = styled('button', {
  // base styles

  variants: {
    color: {
      violet: {},
      gray: {},
    },
  },
});

() => (
  <Button
    color={{
      '@bp2': 'violet'
    }}
  >
    Button
  </Button>
);

You must use the @initial breakpoint to declare the initial variant before any breakpoints are applied.

In the example below, we apply gray initially, then the violet color variant at the bp2 condition.

const Button = styled('button', {
  // base styles

  variants: {
    color: {
      violet: {},
      gray: {},
    },
  },
});

() => (
  <Button
    color={{
      '@initial': 'gray',
      '@bp2': 'violet'
    }}
  >
    Button
  </Button>
);

const Button = styled('button', {
  // base styles

  '@bp1': {
    // Styles for bp1
  },
});