如何在Tailwind CSS中实现类似stroke-*的-webkit-text-stroke配置？

在TailwindCSS中，有一个stroke-*工具，可同时设置描边宽度和颜色，颜色可使用内置调色板。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<p class="
  m-4 flex items-baseline gap-4 text-6xl
  stroke-sky-500 stroke-4
">
  <svg class="h-10" viewBox="0 0 48 40" fill="none">
    <path d="M1 13C1 10.2386 3.23858 8 6 8H13.4914C14.3844 8 15.1691 7.40805 15.4144 6.54944L16.5856 2.45056C16.8309 1.59196 17.6156 1 18.5086 1H29.4914C30.3844 1 31.1691 1.59195 31.4144 2.45056L32.5856 6.54944C32.8309 7.40804 33.6156 8 34.5086 8H42C44.7614 8 47 10.2386 47 13V34C47 36.7614 44.7614 39 42 39H6C3.23858 39 1 36.7614 1 34V13Z" stroke-width="2"></path>
    <circle cx="24" cy="23" r="9" stroke-width="2"></circle>
  </svg>
  Hello world!
</p>

<p class="
  m-4 flex items-baseline gap-4 text-6xl text-transparent
  stroke-sky-500 stroke-4
">
  <svg class="h-10" viewBox="0 0 48 40" fill="none">
    <path d="M1 13C1 10.2386 3.23858 8 6 8H13.4914C14.3844 8 15.1691 7.40805 15.4144 6.54944L16.5856 2.45056C16.8309 1.59196 17.6156 1 18.5086 1H29.4914C30.3844 1 31.1691 1.59195 31.4144 2.45056L32.5856 6.54944C32.8309 7.40804 33.6156 8 34.5086 8H42C44.7614 8 47 10.2386 47 13V34C47 36.7614 44.7614 39 42 39H6C3.23858 39 1 36.7614 1 34V13Z" stroke-width="2"></path>
    <circle cx="24" cy="23" r="9" stroke-width="2"></circle>
  </svg>
  Hello world!
</p>

我发现-webkit-text-stroke不支持这种配置，该如何扩展它？

• -webkit-text-stroke自2017年4月起可用
• Tailwind v4支持2023年3月左右发布的浏览器

虽然我可以使用任意值，但复用起来比较繁琐：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<p class="
  text-6xl
  [-webkit-text-stroke-color:var(--color-sky-500)] [-webkit-text-stroke-width:2px]
">
  Hello world!
</p>

<p class="
  text-6xl text-transparent
  [-webkit-text-stroke-color:var(--color-sky-500)] [-webkit-text-stroke-width:2px]
">
  Hello world!
</p>

我也可以编写分开的工具类，但需要同时处理颜色和宽度。我希望做成单个工具类text-stroke-*来统一管理，而不是分开的text-stroke-width-*和text-stroke-color-*：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility text-stroke-width-* {
  -webkit-text-stroke-width: calc(--value(integer) * 0.5px);
}

@utility text-stroke-color-* {
  -webkit-text-stroke-color: --value(--color-*);
}
</style>

<p class="
  text-6xl
  text-stroke-color-sky-500 text-stroke-width-4
">
  Hello world!
</p>

<p class="
  text-6xl text-transparent
  text-stroke-color-sky-500 text-stroke-width-4
">
  Hello world!
</p>

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