Safari not support truely the breakpoints ! (you should use min-width not width > or <)

[abolraj]

in tailwind 4 the breakpoints handle this way:

Breakpoint prefix Minimum width CSS
sm 40rem (640px)

@media (width >= 40rem) { ... }

md 48rem (768px)

@media (width >= 48rem) { ... }

lg 64rem (1024px)

@media (width >= 64rem) { ... }

xl 80rem (1280px)

@media (width >= 80rem) { ... }

2xl 96rem (1536px)

@media (width >= 96rem) { ... }

but these media query works just on iphone safari 16.4 to up !

it must be such this (such as past tailwind version (3)):

@media (min-width: 640px) { ... }

how to handle these?!

but i do not know how to fix this entirely in tailwind!

TailwindCSS v4.0.6

Vite 6.1.0

Node v20.0.0

Safari v15

IOS

[wongjn]

As per the documentation, Tailwind supports Safari 16.4 at a minimum. If you need to support older browsers, consider using v3 instead.

[abolraj]

@wongjn well I can not to do,
How to do just customize this rule of tailwind4 (use min-width instead?)

[wongjn]

I don't think you can customize the media queries to use min-width, but you can use @custom-variant to register your own variants that do use min-width:

@theme {
  /* Disable default responsive variants */
  --breakpoint-*: initial;
}

@custom-variant sm (@media (min-width 40rem));
@custom-variant md (@media (min-width 48rem));
/* Etc. */

Though this is a work-around for media queries, there may be other aspects of Tailwind v4's generated CSS that may not be compatible with older Safari versions.