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>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" |
RELATED TAGS
CONTRIBUTOR
View all Courses
