如何在Tailwind中为<circle>元素应用stroke-dasharray样式

下面是几个可行的方案，按需选择：

1. 自定义Tailwind工具类 #

在项目的tailwind.config.js里扩展工具类，就能像使用原生Tailwind类一样调用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...其他配置项
  theme: {
    extend: {
      strokeDasharray: {
        '10-5': '10 5',
        '20-10': '20 10',
        'full': '1000', // 可用于圆形进度条这类需要匹配周长的场景
      },
    },
  },
  plugins: [],
}

使用示例：

<circle className="stroke-dasharray-10-5 ...其他Tailwind类" />

2. 直接使用内联样式 #

如果只是单个元素需要特定的stroke-dasharray值，直接写内联样式最省事：

<circle style={{ strokeDasharray: '10 5' }} className="...其他Tailwind类" />

3. 自定义CSS类配合Tailwind #

在项目全局CSS文件（比如globals.css）中定义普通CSS类，再和Tailwind类搭配使用：

.dash-pattern {
  stroke-dasharray: 10 5;
}

使用示例：

<circle className="dash-pattern ...其他Tailwind类" />

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