Media Queries

Mobile-First Approach

By default, all base utilities support responsive variants. Use breakpoints like @sm:*, @md:*, @lg:*, @xl:* & @xxl:* to apply specific rules to different screen sizes.

<h1 className="… @sm:ta-c">Good evening!</h1><h1 className="ta-c … @sm:ta-l">Good evening!</h1>

Yumma CSS breakpoints reference:

Customize Breakpoints

You can extend or override the default media query breakpoints using the theme.screens configuration option in your yumma.config.mjs file.

1. 1

   Create a config file

   yumma.config.mjsCopy

   import { defineConfig } from "yummacss";export default defineConfig({  theme: {    screens: {      "3xl": "112rem",    },  },});

2. 2

   Use Custom Breakpoints

   You will need to restart the dev server to see the changes.

   Copy

   <div className="d-none @3xl:d-b"></div>

Use Media Queries

Resize your browser window to see how these elements respond to viewport width.

<p className="d-b … @sm:d-none">Small screen</p>
<p className="d-none @md:d-none … @sm:d-b">Medium screen</p>
<p className="d-none @lg:d-none … @md:d-b">Large screen</p>
<p className="d-none @xl:d-none … @lg:d-b">Extra large screen</p>
<p className="d-none … @xxl:d-b">Double extra large screen</p>

Touch Devices

The pc:* variant targets devices with a coarse pointer (typically touch screens). Use this to apply larger tap targets & touch-friendly spacing.

<button type="button" class="p-4 bg-indigo c-white @pc:p-6">
  Larger padding on touch devices
</button>

Touch Device Reference: