Tailwind CSS Custom Forms

Repository - Documentation

Official-ish library that provides custom CSS for form inputs.

yarn add @tailwindcss/custom-forms -D

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

Text

<input class="block w-full mt-1 form-input" placeholder="Jane Doe">

Select

Option 1 Option 2 Option 3 Option 4 Option 5

<select class="form-select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Checkbox

Item 1 Item 2

<label class="block">
  <input type="checkbox" class="text-green-600 form-checkbox" checked>
  Item 1
</label>
<label class="block">
  <input type="checkbox" class="text-green-600 form-checkbox">
  Item 2
</label>

Radio

Item 1 Item 2

<label class="block">
  <input type="radio" class="text-green-600 form-radio"  name="radio" checked>
  Item 1
</label>
<label class="block">
  <input type="radio" class="text-green-600 form-radio" name="radio">
  Item 2
</label>