npmpackage.info

Gathering detailed insights and metrics for @tailwindcss/forms

Other packages similar to @tailwindcss/forms

@tailwindcss/custom-forms

0.2.1

A better base for styling form elements with Tailwind CSS.

@formkit/tailwindcss

1.6.9

A FormKit plugin for Tailwind that supplies custom variants based on input state

@julr/unocss-preset-forms

2.0.0

📋 Port of @tailwindcss/forms for UnoCSS.

wb-forms-tailwindcss

0.3.4

Gathering detailed insights and metrics for @tailwindcss/forms

@tailwindcss/forms - 0.5.10 | npmpackage.info

@tailwindcss/forms

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

0.5.10

4,443

MIT

HTML

53.23 kB

4.5

Installations

npm install @tailwindcss/forms

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.12.0

NPM Version

10.9.0 Score

99.2

Supply Chain

Quality

89.1

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

1

Total

64

Closed

25

Merged

38

Issues

Open

2

Total

110

Closed

108

Releases

v0.5.10

Updated on Jan 07, 2025

v0.5.9

Updated on Sep 05, 2024

v0.5.8

Updated on Aug 28, 2024

v0.5.7

Updated on Nov 10, 2023

v0.5.6

Updated on Aug 28, 2023

v0.5.5

Updated on Aug 28, 2023

View All 26 releases

Languages

HTML

JavaScript

HTML (57.82%)

JavaScript (42.18%)

Developer

tailwindlabs

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

4,443 Stars

155 Commits

227 Forks

29 Watchers

2 Branches

22 Contributors

Updated on Jul 18, 2025

Maintainers

View All 22 Contributors

Package Meta Information

Latest Version

0.5.10

Package Id

@tailwindcss/forms@0.5.10

Unpacked Size

53.23 kB

Size

11.36 kB

File Count

NPM Version

10.9.0

Node Version

22.12.0

Published on

Jan 07, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@tailwindcss/forms

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

Installation

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}

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

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.

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.

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`

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.

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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

4

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/tailwindcss-forms/prepare-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/tailwindcss-forms/prepare-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/prepare-release.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/tailwindcss-forms/prepare-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-insiders.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/tailwindcss-forms/release-insiders.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-insiders.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/tailwindcss-forms/release-insiders.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/tailwindcss-forms/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/tailwindcss-forms/release.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/prepare-release.yml:35
Warn: npmCommand not pinned by hash: .github/workflows/release-insiders.yml:31
Warn: npmCommand not pinned by hash: .github/workflows/release.yml:31
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 3 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

4.5

/10

Last Scanned on 2025-07-07

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

Other packages similar to @tailwindcss/forms

Other packages similar to @tailwindcss/forms

@tailwindcss/forms

Installations

Developer Guide

Yes

CommonJS

22.12.0

10.9.0

Score

Pull Requests

1

64

25

38

Issues

2

110

108

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@tailwindcss/forms

Installation

Basic usage

Using classes to style

Using only global styles or only classes

10

10

10

10

10

4

3

1

0

0

0

0

0

0

4.5

/10