Breakpoint

This plugin adds a [data-breakpoint] selector that exposes the current screen and the screens configuration in its ::before and ::after pseudo-elements.

TIP

This plugin is developped to match our JS Toolkit resize service which exposes breakpoint and breakpoints props when a [data-breakpoint] element is found in the DOM.

Configuration

The plugin can be configured with the theme.breakpointPlugin property:

module.exports = {
  theme: {
    breakpointPlugin: {
      smallestBreakpointName: 'xxs',
    },
  },
};

smallestBreakpointName

• Type: String
• Default: 'xxs'

The name to use for the smallest breakpoint.