Responsive for custom utility classes

[CDTdenisP]

Hello, my goal is to have 2 utility class (text-heading-1 text-heading-2) that on breakpoints above md, had a different font size, I tried to achieve this using @media, but I've got an error. Thanks for help :)

[plugin:@tailwindcss/vite:generate:serve] @themeblocks must only contain custom properties or@Keyframes.

@theme {
	--font-heading: "Brygada 1918", serif;
	--font-body: "Atkinson Hyperlegible", serif;

	--text-size-48: 3rem; /* 48px */
	--text-size-40: 2.5rem; /* 40px */
	--text-size-32: 2rem; /* 32px */
	--text-size-28: 1.75rem; /* 28px */
	--text-size-24: 1.5rem; /* 24px */
	--text-size-21: 1.312rem; /* 24px */
	--text-size-18: 1.125rem; /* 18px */
	--text-size-16: 1rem; /* 16px */
	--text-size-14: 0.875rem; /* 14px */
	--text-size-12: 0.75rem; /* 12px */

	--font-tracking-normal: 0.16px;
	--font-tracking-short: -1px;
	--font-tracking-narrow: -1.5px;
	--font-tracking-extend: 0.5px;

	--text-heading-1: var(--text-size-32);
	--text-heading-1--line-height: var(--text-size-40);
	--text-heading-1--letter-spacing: var(--font-tracking-normal);
	--text-heading-1--font-weight: 700;
	--text-heading-1--sm: var(--text-size-16);
}

[wongjn]

Use a CSS rule to change the values of the CSS variable(s). We can use @variant to reference the md breakpoint:

@theme {
  …
}

@layer theme {
  :root {
    @variant md {
      --text-heading-1: …;
    }
  }
}