Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

form in tailwind
tailwind css
form plugin
css

How to use the form plugin in Tailwind CSS

Maham Sawar

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-input
  • form-textarea
  • form-select
  • form-multiselect
  • form-radio
  • form-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"

RELATED TAGS

form in tailwind
tailwind css
form plugin
css

CONTRIBUTOR

Maham Sawar
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring