How to Customize Radio Button Colors Using Tailwind CSS

To change the color of a radio button in Tailwind CSS, you can use custom styles and utilities to modify the appearance since Tailwind CSS does not directly style form controls like radio buttons by default. Here’s a step-by-step guide on how you can customize the color of a radio button:

Using Custom Styles

Hide the Default Radio Button: Use appearance-none to hide the default browser styles of the radio button.
Create a Custom Style: Use pseudo-elements to create a custom look for the radio button.

Use Tailwind CSS Classes: Apply Tailwind CSS classes to style the custom radio button.

<!-- Add this in your HTML -->
<label class="inline-flex items-center">
  <input type="radio" class="form-radio custom-radio text-blue-600" name="radio" />
  <span class="ml-2">Option 1</span>
</label>

<label class="inline-flex items-center">
  <input type="radio" class="form-radio custom-radio text-green-600" name="radio" />
  <span class="ml-2">Option 2</span>
</label>

CSS

.custom-radio {
  @apply h-4 w-4 appearance-none rounded-full border-2 border-indigo-300;
}

.custom-radio:checked {
  @apply border-transparent bg-current;
}

.custom-radio:checked::before {
  content: "";
  @apply mx-auto block rounded-full bg-white;
}

.custom-radio:focus {
  @apply outline-none ring-2 ring-indigo-400 ring-offset-2;
}

appearance-none: Removes the default styling of the radio button.
bg-current: Sets the background color to the current text color.

ring-2 and ring-offset-2: Adds a focus ring to the radio button when it is focused.
Pseudo-elements: Use ::before to create the inner dot for the checked state.

Using Tailwind CSS Plugins

You can also use a plugin like @tailwindcss/forms to make it easier to style form elements, including radio buttons.

Install the Plugin:

npm install @tailwindcss/forms

Add the Plugin to Tailwind Config:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [require('@tailwindcss/forms')],
}

Use the Plugin Classes:

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

<label class="inline-flex items-center">
  <input type="radio" class="form-radio text-green-600" name="radio" />
  <span class="ml-2">Option 2</span>
</label>

Using Custom Styles

Using Tailwind CSS Plugins

saim ansari