Maz-UI

Browser support ​

Maz-UI v5 is built on Tailwind CSS v4, which relies on modern native CSS features with no polyfill path. If your audience still uses older browsers, stay on Maz-UI v4.

Minimum versions ​

BrowserMinimum
Chromium (Chrome, Edge, Opera, Brave, Arc, …)111 (March 2023)
Safari (macOS, iOS, iPadOS)16.4 (March 2023)
Firefox128 (July 2024)
Samsung Internet22 (2023)

On the Android side: Chrome 111+ is bundled with Android 13+ devices and is available as an update on anything from Android 7. WebView apps built against API level 24+ get Chromium 111+ automatically.

Anything older than the versions above will not render the design system correctly. The most common failure mode is colors looking wrong (because color-mix() doesn't resolve) or cascade layers being ignored.

Why these minimums ​

Maz-UI v5 + Tailwind v4 uses the following native CSS features:

color-mix() ​

Used for every alpha modifier (bg-primary/50, the custom color-mix(in srgb, var(--X) 60%, transparent) generated by the @maz-ui/upgrade package for hsl(var(--X) / 60%), etc.).

Browser support · caniuse — supported everywhere since Chromium 111 / Safari 16.4 / Firefox 128.

@property ​

Used internally by Tailwind v4 to declare typed custom properties with default values. Powers the --tw-translate-x, --tw-rotate, etc. that back transform utilities.

Browser support · caniuse — supported everywhere since Chromium 111 / Safari 16.4 / Firefox 128.

Native CSS nesting ​

Used by Tailwind v4 internally and by Maz-UI utilities like cap-f (&::first-letter). v4 does not run a CSS-nesting preprocessor; the output relies on the browser parsing nested rules directly.

Browser support · caniuse — supported everywhere since Chromium 112 / Safari 16.5 / Firefox 117.

:has() selector ​

Used by a few Maz-UI utilities for parent-aware styling.

Browser support · caniuse — supported everywhere since Chromium 105 / Safari 15.4 / Firefox 121.

Testing on older browsers ​

If you need to support a browser older than the matrix above:

  1. Stay on Maz-UI v4 — it keeps Tailwind v3 and targets Chromium 90+, Safari 14+, Firefox 90+.
  2. Check your real audience using your analytics tool before bumping to v5. "Support everything" is often outdated advice in 2026 — most teams can comfortably drop anything older than Chromium 111.

Testing on the minimum versions ​

Playwright can install exact minimum-version browsers for regression testing:

bash
pnpm add -D @playwright/test
npx playwright install chromium@111 firefox@128 webkit@16.4

Then run your visual tests against that matrix in CI.

What happens on unsupported browsers ​

  • color-mix unsupported — any utility that goes through an alpha modifier (bg-primary/50, the custom overlay colors in MazDialog / MazBackdrop) falls back to the base color with no transparency. Visual regression but not a crash.
  • @property unsupported — transform, translate, rotate, scale utilities don't animate smoothly because the custom properties aren't interpolatable without @property.
  • Cascade layers unsupported — the order of Maz-UI styles vs app styles becomes non-deterministic, so resets and utilities can override app styles (or vice versa) unpredictably.

The safe recommendation is: detect at app boot and show an "unsupported browser" screen if you can't guarantee the minimum matrix.

See also ​

Made by LouisMazel with 🖤