使用**：checked**属性来实现这一点。

input[type="radio"]:checked {
    background-color: #your-color
}

在codepen中查看一个定制的单选按钮设计。

您必须使用@tailwindcss/forms-一个插件，它提供了表单样式的基本重置，使表单元素易于用实用程序覆盖。

• 从npm安装插件：

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

• 将插件添加到您的tailwind.config.js文件：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

• 然后，您可以使用Tailwind实用程序类：

https://play.tailwindcss.com/6oxQ5F0cXT
所述解决方案与Tailwind v3.0完全兼容-根据官方文档：
我们的所有第一方插件都已更新，以兼容v3.0

使用Tailwind的文本颜色工具示例"text-indigo-600"很简单，当单选按钮被选中时，您可以使用Tailwind的文本颜色工具（如text-indigo-600）自定义单选按钮的背景颜色
示例：

<label class="inline-flex items-center">
        <input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked>
        <span class="ml-2">Option 1</span>
 </label>

参考：https://tailwindcss-custom-forms.netlify.app/

我也有类似的问题：我能够改变我的输入收音机的背景颜色，但在iOS Safari上，当它被选中时仍然是蓝色的。
TailwindCSS类的正确组合，使其与所希望的颜色无处不在：

<label class="ml-3 mb-1 block">
  <input type="radio" class="checked:bg-emerald-400 checked:hover:bg-emerald-400 checked:active:bg-emerald-400 checked:focus:bg-emerald-400 focus:bg-emerald-400 focus:outline-none focus:ring-1 focus:ring-emerald-400" name="radio" checked />
  <span>Hello</span>
</label>

请参见此处的演示：https://play.tailwindcss.com/LNjVfTqF29