在基于 webkit 的浏览器上显然缺乏对 Tailwind CSS 2+ 的支持 备份方案

如何解决在基于 webkit 的浏览器上显然缺乏对 Tailwind CSS 2+ 的支持 备份方案

我正在开发一个专门使用 Tailwind 作为前端的 web 应用程序，我为它构建了一个简单的侧边栏，如下所示：

<!--SIDEBAR Element (Tailwind)-->
<div
  class="flex flex-col w-full py-8 m-auto text-gray-300 shadow-md justify-around bg-palegray space-y-12 rounded-xl"
>
  <!--PENCIL BUTTON-->
  <button
    class="px-3 mx-auto w-full space-y-4 border-solid border-gray-400 border-r-4"
    id="pencil-button"
  >
    <div class="flex justify-around" id="icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-8"  viewBox="0 0 20 20" fill="currentColor">
            <path
               d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
        </svg>
    </div>
    <p class="text-xs">Draw</p>
  </button>

  <!--SQUARE BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--CIRCLE BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--SPRAY BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--PATTERN BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>

  <!--TEXTURE BUTTON-->
  <button class="px-3 mx-auto ...">
    <!--Basically the same markup as the button above-->
  </button>
</div>

不幸的是，虽然它适用于基于 Firefox 和 Chromium 的浏览器，但它在所有 webkit 浏览器（例如顿悟和 safari）上完全失效。这是那里的样子：

问题似乎是 space-y-4 类，它使用 css 变量并且可能无法在基于 webkit 的浏览器上运行。但是，删除此类并没有解决问题。此外，我重新运行了 tailwind 为 webkit 生成供应商前缀，但这并没有帮助解决问题。

解决方法

基本上，我有两个错误：

• 非语义 HTML
• 内联 SVG 图标没有高度属性

许多浏览器，包括所有基于 webkit 的浏览器（如 Safari），不支持使用 <button> 标签作为 flexbox 容器。最新版本的 Firefox 和 Chrome 支持这一点，但不幸的是，许多其他浏览器不支持，而是忽略放置在其中的所有 flex 类（例如 justify-center、space-y-、space-x-）。>

这是我的代码存在的问题：

  <button class="flex px-3 mx-auto w-full space-y-4" id="pencil-button">
    <div class="flex justify-around" id="icon">
        <svg></svg>
    </div>
    <p class="text-xs">Draw</p>
  </button>

请注意按钮内的 div。我们已将 flexbox 应用于按钮，并为其添加了 space-y-4 类。这不被视为有效的 HTML，因此在页面上呈现时会被忽略。

相反，让我们剪切我们应用到按钮的每个类，并将按钮中的所有这些类移动到 <span>

  <button id="pencil-button">
+   <span class="flex px-3 mx-auto w-full space-y-4">
      <span class="flex justify-around" id="icon">
          <svg></svg>
      </span>
      <p class="text-xs">Draw</p>
+   </span>
  </button>

现在应该可以了！请注意，我们还如何将每个 <div> 标记替换为 <span> 标记，以便我们通过验证。

备份方案

这可能并不总是有效，您仍会看到错误。那是因为 webkit 浏览器并不总是按比例缩放 SVG 图标。如果你只指定宽度，不同时指定宽度和高度，浏览器会给图标一个自动高度，这在大多数情况下是错误的。

  <svg class="w-8" viewBox="0 0 20 20" fill="currentColor">
  </svg>

在这里，我的错误是只指定了宽度。要解决此问题，我们需要添加宽度和高度：

  <svg class="w-8 h-full" viewBox="0 0 20 20" fill="currentColor">
  </svg>

这应该可以解决这个问题。

• 参考文献：https://github.com/tailwindlabs/tailwindcss/issues/2476