Tailwind与内联/样式表样式对比：初始渲染异常排查

我创建了三个包含滑块子元素的网格，分别采用三种样式实现：

• 使用Tailwind CSS
• 使用内联样式
• 使用外部样式表

三者样式定义逻辑完全一致，但Tailwind版本初始渲染显示异常，必须调整窗口大小后，才能和另外两种样式的初始渲染效果一致。已知keen-slider对样式敏感，但代码层面三者样式无差异，请问导致该差异的原因是什么？

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>

内联样式实现代码 #

<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>

外部样式表实现代码 #

.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初始渲染效果 #

调整窗口大小后的Tailwind效果（与另外两种初始渲染一致） #

可能的原因 #

1. 样式加载时机不匹配：Tailwind的CSS是按需生成的，若在KeenSlider初始化时，Tailwind的网格样式还未完全应用到DOM元素，此时KeenSlider计算滑块尺寸时读取的是未生效的元素宽高，导致布局异常。而内联样式和外部样式表会在DOM加载时直接生效，初始化时能拿到正确尺寸。
2. 初始化时机问题：KeenSlider通常在组件挂载时计算容器尺寸并初始化。如果Tailwind样式是异步加载（比如开发环境热更新、生产环境延迟加载），组件挂载时容器的网格布局还未生效，导致滑块尺寸计算错误。窗口resize事件触发时，KeenSlider会重新计算尺寸，此时Tailwind样式已完全应用，布局恢复正常。
3. 隐式样式差异：虽然逻辑样式一致，但Tailwind生成的类可能存在优先级低于默认样式，或某些隐式样式重置未正确应用的情况，导致初始布局时容器的宽高、网格属性未生效。

内容的提问来源于stack exchange，提问作者NickW