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.9

4,263

MIT

HTML

2.89 kB

155,204,870 5.5

Installations

npm install @tailwindcss/forms

Score

98.4

Supply Chain

98.5

Quality

90.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

2

Total

59

Closed

21

Merged

36

Issues

Open

2

Total

103

Closed

101

Releases

v0.5.9

Published on 05 Sept 2024

v0.5.8

Published on 28 Aug 2024

v0.5.7

Published on 10 Nov 2023

v0.5.6

Published on 28 Aug 2023

v0.5.5

Published on 28 Aug 2023

v0.5.4

Published on 13 Jul 2023

View all 25 releases

Developer

tailwindlabs

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

22.8.0

NPM Version

10.8.2 Statistics

4,263 Stars

152 Commits

225 Forks

32 Watching

2 Branches

21 Contributors

Updated on 26 Nov 2024

Bundle Size

10.30 kB

Minified

2.89 kB

Minified + Gzipped

Bundlephobia

Languages

HTML (57.82%)

JavaScript (42.18%)

Total Downloads

Cumulative downloads

Total Downloads

155,204,870

Last day

-2.4%

308,927

Compared to previous day

Last week

3.2%

1,658,501

Compared to previous week

Last month

8.1%

6,933,164

Compared to previous month

Last year

49.7%

71,234,053

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

@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

Maintained

Determines if the project is "actively maintained".

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.

7

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

2

Code-Review

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

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

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

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

5.5

/10

Last Scanned on 2024-11-18

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

@julr/unocss-preset-forms

0.1.0

📋 Port of @tailwindcss/forms for UnoCSS.

@tailwindcss/custom-forms

0.2.1

A better base for styling form elements with Tailwind CSS.

react-tailwindcss-datepicker

1.7.2

A modern React Datepicker using Tailwind CSS 3

tailwindcss

3.4.15

A utility-first CSS framework for rapidly building custom user interfaces.

@tailwindcss/forms

Installations

Score

Pull Requests

2

59

21

36

Issues

2

103

101

Releases

Developer

Developer Guide

CommonJS

Yes

22.8.0

10.8.2

Statistics

Bundle Size

10.30 kB

2.89 kB

Languages

Total Downloads

155,204,870

Daily Downloads

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

10

7

2

0

0

0

0

0

0

5.5

/10

Other packages similar to @tailwindcss/forms