ring and divider is not visible on mobile after migration to tailwindcss v4 though visible on desktop

[k0stya]

For some reason, ring and divider are not working particularly on mobile (verified on iOS) after migrating to v4.

As an example, basic calendar from TailwindUI is completely fine on desktop like shown below:

but does not have ring when opened from mobile

verified the same using Chrome plugin Responsive View and it displays just fine, so the issue seems to be only mobile specific.

It's publicly available site, so can post the link if it helps.

Below is global.css
`@import url('https://fonts.cdnfonts.com/css/champagne-limousines');
@import 'tailwindcss';

@plugin '@tailwindcss/forms';
@plugin 'tailwindcss-animate';

@custom-variant dark (&:is(.dark *));

@theme {
--color-gray-200: #DDDDDD;

--animate-blink-border: blink-border 3s ease-in-out infinite;

--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);

--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));

--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));

--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));

--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));

--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));

--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));

--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));

--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));

--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));

--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));

@Keyframes blink-border {
0% {
outline: 1px solid #111e90;
background-color: rgba(17, 30, 144, 0.15);
}
50% {
outline: 1px solid transparent;
background-color: rgba(17, 30, 144, 0);
}
100% {
outline: 1px solid #111e90;
background-color: rgba(17, 30, 144, 0.15);
}
}
}

/*
The default border color has changed to currentColor in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.

If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/

@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

@layer utilities {
html,
body {
min-height: 100vh;
padding: 0;
margin: 0;
font-family: system-ui, sans-serif;
}

a {
color: inherit;
text-decoration: none;
}

• {
  box-sizing: border-box;
  }

@Keyframes blink {
0% {
opacity: 1;
background-color: rgb(34 197 94 / 0.2);
}
50% {
opacity: 0.6;
background-color: rgb(34 197 94 / 0.1);
}
100% {
opacity: 1;
background-color: rgb(34 197 94 / 0.2);
}
}

.blink-booking {
animation: blink 1.5s ease-in-out infinite;
background-color: rgb(34 197 94 / 0.2);
cursor: pointer;
}
}

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

@layer base {

• {
  @apply border-border;
  }
  body {
  @apply bg-background text-foreground;
  }
  }
  `

Mobile browsers: Chrome, Brave, Safari