I need ur guys help how to change BG color of radio button here's my code.
<input type="radio" className="form-radio h-6 w-6 checked:bg-white text-green-500 p-3 my-4" name="radio" value="1" /> the output still the same as default radio button. enter image description here

CodePudding user response：

You have to use @tailwindcss/forms - a plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

• Install the plugin from npm:

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

• Add the plugin to your tailwind.config.js file:

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

• Then you can use Tailwind utility classes:

https://play.tailwindcss.com/6oxQ5F0cXT

CodePudding user response：

Use :checked property to achieve this.

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

Check out a custom radio button design in codepen.