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.

   page.htmlCopy

   <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: