Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@tailwindcss/forms
Advanced tools
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
The @tailwindcss/forms plugin is a Tailwind CSS plugin that provides a basic reset for form styles that makes form elements easy to override with utilities. It helps in creating consistent and customizable forms with Tailwind CSS utility classes.
Form Inputs Styling
This feature allows you to style form inputs such as text fields, making them more consistent and visually appealing across different browsers.
<input class='block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50' type='text' placeholder='Full name'>
Checkbox and Radio Buttons Styling
With this feature, you can apply Tailwind CSS styles to checkboxes and radio buttons to make them match the overall design of your site.
<input type='checkbox' class='w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500'>
Select Dropdown Styling
This feature allows you to style select dropdowns with Tailwind CSS, providing a more consistent and customizable appearance.
<select class='block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50'><option>Option 1</option><option>Option 2</option></select>
File Input Styling
This feature enables you to style file inputs with Tailwind CSS, making them blend in with the rest of your form elements.
<input type='file' class='block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100'>
Bootstrap is a popular front-end framework that includes its own form styles. It provides a wide range of styled form elements out of the box, but it is not as customizable at the utility level as Tailwind CSS with @tailwindcss/forms.
Formik is a library that helps with form state management in React applications. While it doesn't provide styling out of the box, it is often used in conjunction with styling libraries like Tailwind CSS to create forms.
React Hook Form is a library for managing forms in React. Similar to Formik, it focuses on form state management and validation rather than styling, but can be used with Tailwind CSS for styling purposes.
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
Note that @tailwindcss/forms is designed for Tailwind CSS v2.0.
Install the plugin from npm:
# Using npm
npm install @tailwindcss/forms
# Using Yarn
yarn add @tailwindcss/forms
Then add the plugin to your tailwind.config.js
file:
// 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']
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">
<!-- ... -->
</select>
<!-- 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.
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.
For situations where the default strategy doesn't work well with your project, you can use the class
strategy to make all form styling opt-in instead of applied globally:
// tailwind.config.js
plugins: [
require("@tailwindcss/forms")({
strategy: 'class',
}),
],
When using the class
strategy, form elements do not receive any reset styles by default, and reset styles are added per element using a new set of form-*
classes generated by the plugin:
<input type="email" class="form-input px-4 py-3 rounded-full">
<select class="form-select px-4 py-3 rounded-full">
<!-- ... -->
</select>
<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 |
FAQs
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
The npm package @tailwindcss/forms receives a total of 1,311,227 weekly downloads. As such, @tailwindcss/forms popularity was classified as popular.
We found that @tailwindcss/forms demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.