在基于 webkit 的浏览器上明显缺乏对 Tailwind CSS 2+ 的支持

Question

我正在开发一个专门使用 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 浏览器（例如 Epiphany 和 Safari）上完全无法运行。这是那里的样子：

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

Answer 1

基本上，我有 2 个错误：

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

许多浏览器，包括所有基于 webkit 的浏览器（如 Safari），不支持 使用 <button> 标签作为 flexbox 容器。最新版本的 Firefox 和 Chrome 支持这一点，但不幸的是许多其他浏览器不支持，相反它们忽略所有 flex classes（例如 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 class。这被认为是无效的 HTML，因此在页面上呈现时会被忽略。

相反，让我们剪切应用到按钮的每个 class，并将按钮中的所有 class 移动到 <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

在基于 webkit 的浏览器上明显缺乏对 Tailwind CSS 2+ 的支持

Apparent lack of support for Tailwind CSS 2+ on webkit-based browsers

html

css

webkit

tailwind-css

备份解决方案