Can't get inline SVG to change colour using Tailwindcss

Question

I have an SVG that I would like to control with Tailwindcss classes. It work inline in this format and displays as white, but obviously massive in size.

  <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              stroke="currentColor"
              width="1569.97"
              height="1564.969"
            >
              <path
                d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z"
                transform="translate(0 -.031)"
                style={{ fill: "#fff", fillRule: "evenodd" }}
              />
            </svg>

Here's what I want to change it to using Tailwindcss, but the SVG disappears. I am trying to control the colour and height and width using Tailwindcss classes.

  <svg
              className="h-8 w-8 fill-current stroke-current text-white"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
className="fill-white"
                d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z"
                transform="translate(0 -.031)"]
              />
            </svg>

Someone please save me from this nightmare.

Answer 1

If you will remove the inline width and height attributes, add viewbox to represent the aspect ratio (if you don't add height and width with class or inline styles, viewbox values will be width and height). Then your tailwind classes will work as expected.

<script src="https://cdn.tailwindcss.com"></script>

<svg class="h-8 w-8 fill-red-800" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1569.97 1564.969">
  <path d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z"
    transform="translate(0 -.031)"
  />
</svg>

Answer 2

You wrote className instead of class.

Also width and height or viewbox are SVG attributes that can't be replaced by CSS h-8 w-8.

There is an example:

<svg class="fill-current stroke-current" width="1569.97" height="1564.969" xmlns="http://www.w3.org/2000/svg">
  <path class="fill-white" d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z" transform="translate(0 -.031)"/>
</svg>