?? Styling Inputs, Selects, Checkboxes, and Radios with Tailwind CSS

Tailwind CSS provides utilities to style form elements like inputs, selects, checkboxes, and radio buttons. However, some elements like checkboxes and radios require a bit more care since their appearance is browser-dependent.

1. Styling Inputs and Selects

Use Tailwind utilities for padding, border, colors, focus states, etc.

<input  type="text"  placeholder="Enter text"  class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"/><select  class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">  <option>Option 1</option>  <option>Option 2</option></select>

• border-gray-300: light gray border

• rounded-md: medium rounded corners

• focus:ring-2 focus:ring-blue-500: adds a blue ring on focus for accessibility

2. Styling Checkboxes and Radio Buttons

Browsers render checkboxes and radios natively with limited CSS control. Tailwind does basic styling, but for full control, you usually hide the native input and style a custom element.

Simple Tailwind Styling (limited)

<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" /><input type="radio" class="form-radio h-5 w-5 text-green-600" />

• form-checkbox and form-radio are Tailwind's built-in base styles.

• text-blue-600 sets the checked color.

3. Using Tailwind Forms Plugin (Recommended)

Tailwind Labs provides the @tailwindcss/forms plugin that normalizes form styles for better cross-browser consistency.

Installation

npm install @tailwindcss/forms

Add to your tailwind.config.js:

module.exports = {  plugins: [    require('@tailwindcss/forms'),    // other plugins  ],}

Usage

Then you get nicer default styles for inputs, selects, checkboxes, radios, textareas, and more.

<input type="text" placeholder="Name" class="block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500" />

4. Custom Checkbox/Radio with Labels

For more control, hide the native input and style a label with custom visuals.

<label class="inline-flex items-center space-x-2 cursor-pointer">  <input type="checkbox" class="hidden peer" />  <div class="w-5 h-5 border border-gray-400 rounded-sm peer-checked:bg-blue-600 peer-checked:border-blue-600"></div>  <span>Accept Terms</span></label>

• peer and peer-checked are Tailwind's way to style based on sibling input's checked state.

• Hides the native checkbox input, uses a styled div to represent it.

Summary

Would you like a full working example with all these elements styled together?