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

  • By Tailwind Labs
  • Last update: Jan 8, 2023
  • Comments: 13

@tailwindcss/forms

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

Installation

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'),
    // ...
  ],
}

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

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 that normally need to be reset with appearance: none and customized using custom CSS:

"> 

<select class="px-4 py-3 rounded-full">
  
select>


<input type="checkbox" class="rounded text-pink-500" />

More customization examples and best practices coming soon.

Using classes instead of element selectors

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

Github

https://github.com/tailwindlabs/tailwindcss-forms

Comments(13)

  • 1

    Cannot find module 'tailwindcss/plugin'

    I'm getting this error when building a project with:

    {
  "devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "tailwindcss": "^2.0.2"
  }
}

    tailwind.config.js:

    module.exports = {
  plugins: [require("@tailwindcss/forms")],
}

    ERROR in ./src/web/css/index.scss
Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'tailwindcss/plugin'
Require stack:
- PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js
- PROJECT_DIR/projects/Frontend/tailwind.config.js
- PROJECT_DIR/projects/Frontend/node_modules/tailwindcss/lib/index.js
- PROJECT_DIR/projects/Frontend/postcss.config.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/loaders.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/ExplorerBase.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/Explorer.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/index.js
- PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/utils.js
- PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/index.js
- PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/cjs.js
- PROJECT_DIR/node_modules/loader-runner/lib/loadLoader.js
- PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js
- PROJECT_DIR/node_modules/webpack/lib/NormalModule.js
- PROJECT_DIR/node_modules/webpack/lib/LoaderTargetPlugin.js
- PROJECT_DIR/node_modules/html-webpack-plugin/lib/child-compiler.js
- PROJECT_DIR/node_modules/html-webpack-plugin/lib/cached-child-compiler.js
- PROJECT_DIR/node_modules/html-webpack-plugin/index.js
- PROJECT_DIR/projects/Frontend/webpack-configs/webpack-common-config.ts
- PROJECT_DIR/projects/Frontend/webpack.config.ts
- PROJECT_DIR/node_modules/webpack-cli/lib/groups/ConfigGroup.js
- PROJECT_DIR/node_modules/webpack-cli/lib/webpack-cli.js
- PROJECT_DIR/node_modules/webpack-cli/lib/bootstrap.js
- PROJECT_DIR/node_modules/webpack-cli/bin/cli.js
- PROJECT_DIR/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (PROJECT_DIR/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js:2:16)
    at Module._compile (PROJECT_DIR/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at processResult (PROJECT_DIR/node_modules/webpack/lib/NormalModule.js:582:19)
    at PROJECT_DIR/node_modules/webpack/lib/NormalModule.js:675:5
    at PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js:397:11
    at PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/index.js:103:7)
 @ ./src/web/index.tsx 5:0-26
  • 2

    Change caret color on selects elements

    Unless I'm mistaken these are all grey-500. Any chance of adding a way to customise the color of these, either via a utility class or within the config?

  • 3

    Adds selector ‘strategy’ plugin option

    Addresses #11 , #20 , #22

    This intentionally keeps the code pretty dumb. Though, rather than using a ternary for every single selector, I opted to pass the selector string options to a simple function to determine whether to use .form- classes or not. This keeps it somewhat cleaner.

    To Test

    If you'd like to do a simple test, paste in the kitchen sink html code here and toggle the useFormClasses boolean option (and remove altogether).

      plugins: [
    require("@tailwindcss/forms")({
      useFormClasses: false,
    }),
  ],

    The kitchen sink demo HTML is essentially duplicated. The first top set, being the original untouched kitchen sink, should work as intended without the option present, or set to false. (The bottom set will be broken except for the form controls that will rely on the .form- class & the element or selector — you can ignore)

    If useFormClasses is set to true, the entire top original kitchen sink set should be entirely broken and the bottom set, which are all styled with .form- classes, should be styled correctly.

  • 4

    How do you configure this plugin to work with purge?

    Rails 6.1, Tailwindcss 2.0.3

    The CSS resets that this plugin provides are getting clobbered by my purge settings in tailwind.config.js:

    module.exports = {
  purge: [
    './app/**/*.html.erb',
    './app/**/*.html.haml',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

    package.json

    {
  "name": "bham_food_scores_api",
  "private": true,
  "dependencies": {
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^5.2.1",
    "@tailwindcss/forms": "^0.2.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

    What am I doing wrong with this config? Many thanks!

  • 5

    Fix autoprefixer warning about `color-adjust`

    Until recently FF only supported the non-standard color-adjust property. Now that it supports print-color-adjust autoprefixer generates warnings when using the non-standard property.

    Fixes https://github.com/tailwindlabs/tailwindcss/issues/8250 Fixes #114

  • 6

    Add coloured check marks

    I'm using a checkbox on a coloured background, and so I want the checkbox box to be white, and the tick inside to be the same colour as the background. Here's one made from an SVG I stole from here before Tailwind 2:

    image

    I'm trying to replicate this using just classes with Tailwind 2, but have been unable to so far:

    image

    <input type="checkbox" class="ml-1 h-4 w-4 rounded border-gray-400 focus:border-raisin focus:ring-2 focus:ring-black text-white">

    (I have a custom colour called 'raisin' which is #27262c)

  • 7

    How to remove styles from a particular input?

    I use vue and i'm using a third-party component called vue multiselect.

    Is there a way to ignore input elements within a particular selector (i.e., ignore input elements inside a particular class) so that, for example, there isn't a border around the text input?

    Screen Shot 2020-12-04 at 13 10 14

  • 8

    Radio and Checkbox lose styling in prod mode

    I'm wondering what i'm doing wrong 🤔. I have a form with input, radio, select, and checkbox elements. I know that my configuration with @tailwindcss/forms is valid since in dev mode; all form elements are displayed correctly -- with styling.

    tailwindcss build ./src/dev/tailwind.css -o ./public/css/main.css

    Yet when I run the production

    NODE_ENV=production postcss build ./src/dev/tailwind.css -o ./public/css/main.css

    I'm losing styling on radio and checkbox elements, select seems to be not impacted and I'm wondering why?

    /* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

    // tailwind.config.js
module.exports = {
  purge: {
    content: ["./public/**/*.html", "./src/main/**/*.cljs"]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

    // postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({ preset: 'default' }),
  ]
}

    Output when running (all ok):

    tailwindcss build ./src/dev/tailwind.css -o ./public/css/main.css
    tw-build

    Output when running (radio and checkbox lose styling):

    NODE_ENV=production postcss build ./src/dev/tailwind.css -o ./public/css/main.css
    tw-prod

    Any ideas or pointes what I could change to make this work would be appreciated.

  • 9

    [FR] Styles for `input[type='file']`

    I'm wondering if you have thoughts on styling file inputs. The vanilla file input is weird, with both a button and some dynamic text. Does that mean individual projects should choose styling on their own? Or is there some useful global reset?

  • 10

    Does not inherit config ring settings

    In my tailwind config, I have used theme extend ringColor to change the default color of my ring. It works on non-form elements, but on inputs, selects, etc. it still uses the tailwind default ringColor (blue-600, I think).

    My expectation is that this plugin should inherit the ringColor, ringOpacity, etc. from the tailwind config file. Is this expectation correct and is this something that can be fixed?

  • 11

    Purged attribute selectors

    Looks like PurgeCSS automatically purges the attribute selectors eg [type='checkbox'].

    I had to add the following rule to the safelist:

    module.exports = {
  plugins: [require("@tailwindcss/forms")],
  purge: {
    options: {
      safelist: [
        "type", // [type='checkbox']
      ],
    },
    preserveHtmlElements: true,
  },
};

    Should this be something that is set up out of the box? I'm happy to PR if you can point me into the right direction

  • 12

    Dark mode background overrides text colors on checkboxes when using `class` dark mode variant

    What version of @tailwindcss/forms are you using?

    0.3.3

    What version of Node.js are you using?

    14.15.4

    What browser are you using?

    Chrome

    What operating system are you using?

    macOS

    Reproduction repository

    https://github.com/johnathanludwig/tailwind-forms-dark-mode

    Describe your issue

    In light mode you can style a checkbox by setting a background color for the base checkbox, and a text color for the checked version of the checkbox.

    With dark mode via the class method, the background classes sets both the unchecked and checked color removing the ability to customize.

    The styling works properly when using media for dark mode.

    Reproduction Steps:

    1. Build tailwind using @tailwindcss/forms and enable dark mode using the class method.
    2. Add checkbox with a dark background color class and dark text color class.
    3. Enable wrap the checkbox in a dark class.
    4. Check the checkbox

    Expected Results

    The text color should be displayed when the checkbox is checked.

    Actual Results

    The background color is used for both checked and unchecked checkboxes.

  • 13

    Style date placeholders to match standard placeholders

    The placeholders on date inputs don't respect the standard placeholder attribute. It would be great if we could have the pseudo elements styled so they match the placeholder e.g. changing

    'input::placeholder, textarea::placeholder'

    to

    'input::placeholder, textarea::placeholder, ::-webkit-datetime-edit'

    There's a bit more to it (e.g. the firefox placeholders)

Popular Tag

Related