无法更改 Tailwind V3 上的单选按钮背景颜色

Question

我需要你们帮助如何更改单选按钮的背景颜色这是我的代码。
<input type="radio" className="form-radio h-6 w-6 checked:bg-white text-green-500 p-3 my-4" name="radio" value="1" /> 输出仍然与默认单选按钮相同。在此输入图像描述

Answer 1

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

• 从 npm 安装插件：

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

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

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

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

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

https://play.tai​​lwindcss.com/6oxQ5F0cXT

根据官方文档，所描述的解决方案与 Tailwind v3.0 完全兼容：

我们所有的第一方插件都已更新以兼容 v3.0

Answer 2

我遇到了类似的问题：我能够更改输入单选按钮的背景颜色，但在 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.tai​​lwindcss.com/LNjVfTqF29