Tailwindcss Forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
Alternatives To Tailwindcss Forms
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
2 days ago13mitPHP
Admin panel, form builder and table builder for Laravel. Built with the TALL stack. Designed for humans.
Tailwindcss Forms3,14852922 days ago46September 02, 20222mitHTML
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
2 days ago15otherTypeScript
Open Source Experience Management Solution
Flowbite Svelte9681212 hours ago291November 14, 202263mitSvelte
Official Svelte components built for Flowbite and Tailwind CSS
Tall Forms64112 months ago120March 11, 20225mitPHP
Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.
25 days ago7mitJavaScript
Vue form components with server-side validation in mind
Laravel Form Components264
6 days ago70October 20, 2022mitPHP
Form components built for Tailwind & Livewire.
a year ago11January 08, 2022mitJavaScript
Basic UI components for Tailwind CSS.
Instagram Clone68
13 days ago17TypeScript
Instagram 2.0 with REACT.JS! (Next.js, TypeScript, NextAuth.js v4.17.0, Tailwind CSS, Firebase v9, Framer Motion, Image Uploading, Google Authentication,, Instagram Profile)
Laravel Casts5712 years ago137September 15, 202021mitPHP
Form builder for Laravel.
Alternatives To Tailwindcss Forms
Select To Compare

Alternative Project Comparisons


A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.


Install the plugin from npm:

npm install -D @tailwindcss/forms

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  plugins: [
    // ...

Basic usage

View the live demo

All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.

Currently we add basic utility-friendly form styles for the following form element types:

  • input[type='text']
  • input[type='password']
  • input[type='email']
  • input[type='number']
  • input[type='url']
  • input[type='date']
  • input[type='datetime-local']
  • input[type='month']
  • input[type='week']
  • input[type='time']
  • input[type='search']
  • input[type='tel']
  • input[type='checkbox']
  • input[type='radio']
  • select
  • select[multiple]
  • textarea

Note that for text inputs, you must add the type="text" attribute for these styles to take effect. This is a necessary trade-off to avoid relying on the overly greedy input selector and unintentionally styling elements we don't have solutions for yet, like input[type="range"] for example.

Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like <select> or <input type="checkbox"> that normally need to be reset with appearance: none and customized using custom CSS:

<!-- You can actually customize padding on a select element now: -->
<select class="px-4 py-3 rounded-full">
  <!-- ... -->

<!-- Or change a checkbox color using text color utilities: -->
<input type="checkbox" class="rounded text-pink-500" />

More customization examples and best practices coming soon.

Using classes to style

In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a <div>, look like a form element.

<input type="email" class="form-input px-4 py-3 rounded-full">

<select class="form-select px-4 py-3 rounded-full">
  <!-- ... -->

<input type="checkbox" class="form-checkbox rounded text-pink-500" />

Here is a complete table of the provided form-* classes for reference:

Base Class
[type='text'] form-input
[type='email'] form-input
[type='url'] form-input
[type='password'] form-input
[type='number'] form-input
[type='date'] form-input
[type='datetime-local'] form-input
[type='month'] form-input
[type='search'] form-input
[type='tel'] form-input
[type='time'] form-input
[type='week'] form-input
textarea form-textarea
select form-select
select[multiple] form-multiselect
[type='checkbox'] form-checkbox
[type='radio'] form-radio

Using only global styles or only classes

Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects.

If generating both the global (base) styles and classes doesn't work well with your project, you can use the strategy option to limit the plugin to just one of these approaches.

// tailwind.config.js
plugins: [
    strategy: 'base', // only generate global styles
    strategy: 'class', // only generate classes

When using the base strategy, form elements are styled globally, and no form-{name} classes are generated.

When using the class strategy, form elements are not styled globally, and instead must be styled using the generated form-{name} classes.

Popular Form Projects
Popular Tailwindcss Projects
Popular User Interface Components Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.