Identical(?) Tailwind vs Inline vs Stylesheet styles – Tailwind incorrect on initial render

I’ve got three grids, each with sliders as children.

  • 1 is styled with tailwind, here
  • 1 with inline styles, here
  • and 1 with a stylesheet here

If you look at the styles below, is there any reason for them to be rendering differently?
The Tailwind version renders incorrectly initially. You have to resize the window for it to display as the others do. I understand that sliders (in this case keen-slider) can be particular with their styling, but to my naive eye the styling looks exactly the same:

Tailwind:

<div className="slider-grid grid grid-cols-2 gap-4 p-4 w-[75%]">
  <div className="flex flex-col overflow-hidden max-w-[100%] gap-y-[10px]">
  </div>
</div>

Inline:

<div
  className="slider-grid"
  style={{
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    width: "75%",
    gap: "1rem",
    padding: "1rem",
  }}

    <div
      className="slider"
      style={{
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
        maxWidth: "100%",
        rowGap: "10px",
      }}
    >
  </div>
</div>

Stylesheet:

.slider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 75%;
  gap: 1rem;
  padding: 1rem;
}

.slider {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
  row-gap: 10px;
}

Tailwind on render:

Tailwind before

Tailwind after resize (exactly like both inline and stylesheet versions on initial render):
Tailwind after