@screen Mixin

Use @screen mixin for responsive breakpoints and media queries.

Usage:

.any-class {
	/* direct */
	@screen <variant> { ... }
}

info

This page contains only the mixins configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Important Note

warning

If mixinConfig.resolve exists, Shilp CSS does not process mixinConfig.variants. You must handle variants inside your resolver explicitely.

Example:

the @screen mixin uses resolve, so variants from shilpConfig.extend.mixins.screen.variants are ignored.

To overcome this, either provide a custom resolver or define a separate mixin.

Reference

Note

See: Working With Breakpoints

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  mixins: {
    screen: {
      resolve: () => {
        /* see: /docs/responsive-design#working-with-breakpoints */
      },
    },
  },
};

export default shilpConfig;

Published at: Apr 20, 2026

Last updated at: Jun 15, 2026

Motion Mixin Self Mixin