How to use the form plugin in Tailwind CSS
Overview
Tailwind CSS is a utility-first CSS framework that provides official plugins for popular features.
Tailwind CSS Forms is a plugin that improves the default styling of form elements and makes it easier to customize them using utility classes.
Installation
Install the plugin using npm:
npm install @tailwindcss/forms
Install the plugin using yarn:
yarn add @tailwindcss/forms
Configuration
Add the plugin to the Tailwind configuration file tailwind.config.js.
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@tailwindcss/forms'),
]
}
Plugin classes
@tailwindcss/forms plugin provides several new classes to style our forms:
form-inputform-textareaform-selectform-multiselectform-radioform-checkbox
Add these classes to the corresponding HTML elements to apply some form styles.
form-input
Add basic styles to an HTML input element using the form-input class.
<label class="block"><span class="text-black">Name</span><input class="form-input mt-1 block border-2" placeholder="Your Good Name"></label>
form-textarea
Add basic styles to an HTML textarea element using the form-textarea class.
<label class="block"><span class="text-black">About</span><textarea class="form-textarea mt-1 block border-2" rows="5" placeholder="Tell us something about you...!!!"></textarea></label>
form-select
Add basic styles to the select element using the form-select class.
<label class="block"><span class="text-black">Gender</span><select class="form-select block mt-1"><option>Male</option><option>Female</option></select></label>
form-multiselect
For selecting various values instead of using multiple attributes on an HTML select element, try the form-multiselect class.
<label class="block"><span class="text-black">Hobbies</span><select class="form-multiselect block mt-1" multiple><option>Book Reading</option><option>Writing</option><option>Poetry</option><option>Painting</option><option>Gardening</option></select></label>
form-radio
Use the form-radio class to let users choose only one option from a set of options.
<div class="block"><span class="text-black">Your Age</span><div class="mt-2"><div><label class="inline-flex items-center"><input type="radio" class="form-radio" name="radio" value="1" checked><span class="ml-2">16 - 20</span></label></div><div><label class="inline-flex items-center"><input type="radio" class="form-radio" name="radio" value="2"><span class="ml-2">21 - 25</span></label></div><div><label class="inline-flex items-center"><input type="radio" class="form-radio" name="radio" value="2"><span class="ml-2">26 - 30</span></label></div></div></div>
form-checkbox
To let a user select one or more items of a limited number of choices, use the form-checkbox class.
<div class="block"><span class="text-black">Your Hobbies</span><div class="mt-2"><div><label class="inline-flex items-center"><input type="checkbox" class="form-checkbox"><span class="ml-2">Poetry</span></label></div><div><label class="inline-flex items-center"><input type="checkbox" class="form-checkbox"><span class="ml-2">Painting</span></label></div></div></div>
Element types with reference to the form plugin class
Type | Class |
type='text' | class="form-input" |
type='email' | class="form-input" |
type='password' | class="form-input" |
type='url' | class="form-input" |
type='number' | class="form-input" |
type='time' | class="form-input" |
type='date' | class="form-input" |
type='datetime-local' | class="form-input" |
type='week' | class="form-input" |
type='month' | class="form-input" |
type='tel' | class="form-input" |
type='search' | class="form-input" |
textarea | class="form-textarea" |
select | class="form-select" |
select[multiple] | class="form-multiselect" |
type='radio' | class="form-radio" |
type='checkbox' | class="form-checkbox" |
Free Resources
