A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
npm install @tailwindcss/formsA plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
Install the plugin from npm:
``sh`
npm install -D @tailwindcss/forms
Then, when using Tailwind CSS v4, add the plugin to your main stylesheet:
`css`
/ app.css /
@import "tailwindcss";
@plugin "@tailwindcss/forms";
If you are still using Tailwind CSS v3, add the plugin to your tailwind.config.js file:
`js`
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}
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']
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like
`html
`
More customization examples and best practices coming soon.
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
, look like a form element.`html
`Here is a complete table of the provided
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 |$3
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.When using Tailwind CSS v4, configure the plugin in your main stylesheet:
`css
/ app.css /
@plugin "@tailwindcss/forms" {
strategy: "base"; / only generate global styles; or /
strategy: "class"; / only generate classes /
}
`If you are still using Tailwind CSS v3, configure the plugin in your
file:`js
// tailwind.config.js
plugins: [
require("@tailwindcss/forms")({
strategy: 'base', // only generate global styles
strategy: 'class', // only generate classes
}),
],
`When using the
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.