Gathering detailed insights and metrics for @tailwindcss/forms
Gathering detailed insights and metrics for @tailwindcss/forms
Gathering detailed insights and metrics for @tailwindcss/forms
Gathering detailed insights and metrics for @tailwindcss/forms
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
npm install @tailwindcss/forms
Typescript
Module System
Node Version
NPM Version
99.2
Supply Chain
99
Quality
91
Maintenance
100
Vulnerability
100
License
HTML (57.82%)
JavaScript (42.18%)
Total Downloads
200,087,003
Last Day
103,671
Last Week
1,832,973
Last Month
7,874,157
Last Year
82,470,793
MIT License
4,432 Stars
155 Commits
228 Forks
29 Watchers
2 Branches
22 Contributors
Updated on Jul 03, 2025
Minified
Minified + Gzipped
Latest Version
0.5.10
Package Id
@tailwindcss/forms@0.5.10
Unpacked Size
53.23 kB
Size
11.36 kB
File Count
16
NPM Version
10.9.0
Node Version
22.12.0
Published on
Jan 07, 2025
Cumulative downloads
Total Downloads
Last Day
-7.1%
103,671
Compared to previous day
Last Week
-7.6%
1,832,973
Compared to previous week
Last Month
1.8%
7,874,157
Compared to previous month
Last Year
38%
82,470,793
Compared to previous year
1
1
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
Install the plugin from npm:
1npm install -D @tailwindcss/forms
Then add the plugin to your tailwind.config.js
file:
1// tailwind.config.js 2module.exports = { 3 theme: { 4 // ... 5 }, 6 plugins: [ 7 require('@tailwindcss/forms'), 8 // ... 9 ], 10}
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
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:
1<!-- You can actually customize padding on a select element now: --> 2<select class="rounded-full px-4 py-3"> 3 <!-- ... --> 4</select> 5 6<!-- Or change a checkbox color using text color utilities: --> 7<input type="checkbox" class="rounded text-pink-500" />
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 <div>
, look like a form element.
1<input type="email" class="form-input rounded-full px-4 py-3" /> 2 3<select class="form-select rounded-full px-4 py-3"> 4 <!-- ... --> 5</select> 6 7<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 |
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.
1// tailwind.config.js 2plugins: [ 3 require("@tailwindcss/forms")({ 4 strategy: 'base', // only generate global styles 5 strategy: 'class', // only generate classes 6 }), 7],
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.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
GitHub workflow tokens follow principle of least privilege
Details
Reason
license file detected
Details
Reason
packaging workflow detected
Details
Reason
6 existing vulnerabilities detected
Details
Reason
Found 9/30 approved changesets -- score normalized to 3
Reason
1 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 1
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More