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

【问题标题】：Can't change radio button background color on Tailwind V3无法更改 Tailwind V3 上的单选按钮背景颜色
【发布时间】：2022-04-06 03:10:27
【问题描述】：

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

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

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

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

查看codepen 中的自定义单选按钮设计。

【讨论】：

【解决方案2】：

您必须使用@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 - 据官方docs：

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

【讨论】：

【解决方案3】：

使用 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/

【讨论】：