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:

| Prefix | Min width | Pixel value | | ------ | --------------------------- | ----------- | | sm | @media (min-width: 40rem) | 640px | | md | @media (min-width: 48rem) | 768px | | lg | @media (min-width: 64rem) | 1024px | | xl | @media (min-width: 80rem) | 1280px | | xxl | @media (min-width: 96rem) | 1536px |

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

   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.

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

| Prefix | Media Query | Description | | ------ | -------------------------- | ------------- | | pc: | @media (pointer: coarse) | Touch devices |