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

user_13078279 0
Viewed 3279

I am working on a webapp that exclusively uses Tailwind for the frontend, and I have constructed a simple sidebar for it like so:

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

Unfortunately, while it works on Firefox and Chromium-based browsers, it completely breaks on all webkit browsers (such as epiphany and safari). This is what it looks like there:

The problem apparently seems to be the space-y-4 class, which uses css variables and may not work on webkit-based browsers. However, removing this class did not solve the issue. Additionally, I re-ran tailwind to produce vendor prefixes for webkit, but that has not helped solve the issue.

tailwind-css webkit css html
1 Answers

Essentially, I had 2 errors:

  • Non-semantic HTML
  • No height attribute for inline SVG icon

Many browsers, including all that are webkit-based (like Safari), do not support using a <button> tag as a flexbox container. The latest versions of Firefox and Chrome support this, but unfortunately many other browsers do not, and instead they ignore all flex classes (e.g. justify-center, space-y-, space-x-) placed within.

This was the issue my code has:

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

Notice how there's a div inside of a button. We've applied a flexbox to the button, and added a space-y-4 class to it. This is not considered valid HTML, and therefore is ignored when rendered on a page.

Instead, let's cut every class we've applied to our button, and move all of those classes in the button to a <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>

Now this should work! Notice how we've also replaced every <div> tag with a <span> tag, so that we pass validation.

Backup Solution

This may not always work, and you'll still see an error. That's because webkit browsers do not always scale SVG icons proportionally. If you just specify the width, and not both the width and height, the browser will give the icon an automatic height, which, in most cases, is wrong.

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

Here, my error was in only specifying the width. To fix this, we need to add both width and height:

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

That should fix this issue.

user_130782790
Related