v4: How can i define Custom Screen size ?

[Trandx]

Hello all!

Please haw can i define custom screen size in tailwind v4 ?

this my code in v3

export const screens = { "sup-sm": "641px", "sup-md": "769px", "sup-lg": "1025px", "sup-xl": "1281px", "sup-2xl": "1537px", sm: { max: "640px" }, md: { max: "768px" }, lg: { max: "1024px" }, xl: { max: "1280px" }, "2xl": { max: "1536px" }, //disable hover on mobile "can-hover": { raw: "(hover: hover)" }, touch: { raw: "(hover: none)" }, }; // Export the full Tailwind configuration const tailwindConfig: Config = { content: [], theme: { extend: { keyframes, animation, screens, colors, fontFamily, }, }, plugins: [], };

[wongjn]

The min-width ones follow the pattern:

@theme {
  --breakpoint-sup-sm: 641px;
  --breakpoint-sup-md: 769px;
  --breakpoint-sup-lg: 1025px;
  …
}

For others, you'd use @custom-variant:

@custom-variant sm (@media (max-width: 640px));
@custom-variant sm (@media (max-width: 768px));
@custom-variant sm (@media (max-width: 1024px));
…
@custom-variant can-hover (@media (hover: hover));
@custom-variant touch (@media (hover: none));