tailwindlabs / tailwindcss-forms Goto Github PK

I am trying to add this plugin to existing nuxt + tailwindcss application.
After adding it to plugins section of tailwind config I get an error: Failed to compile with 3 errors

Probably there is some naming collision or postcss problem with:

• nuxt-content
• flatpickr
• vue2-google-maps

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

What version of @tailwindcss/forms are you using?

0.3.2

What version of Node.js are you using?

12.18.4

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://www.youtube.com/watch?v=3O_3X7InOw8

After switching to the JIT, all my form elements show a box-shadow focus state even though they have focus-visible:ring.

This is not an issue with the normal way of compiling tailwind. I switched back to that and everything works as expected.

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

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?

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)

Hi!

First of all, love the plugin!
Is there any reason why the disabled attribute is ignored?
There is no visual difference anymore between the two:

https://play.tailwindcss.com/uEon0s582K?file=config

I can look into making a PR, if you think that would be a nice addition.

What version of @tailwindcss/forms are you using?

0.3.0

What version of Node.js are you using?

12.18.4

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://www.youtube.com/watch?v=3O_3X7InOw8

Not sure what changed but I updated this to 0.3.0 today and this error appeared:

ERROR in ./src/styles/tailwind.css (./node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--13-2!./src/styles/tailwind.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'type' of null
    at extractCandidates (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:314:22)
    at /Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:328:22
    at Array.flatMap (<anonymous>)
    at withIdentifiers (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:326:30)
    at addBase (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:390:38)
    at /Users/me/project/node_modules/@tailwindcss/forms/src/index.js:252:5
    at registerPlugins (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:580:7)

...etc

Rolled back to 0.2.1 and the error disappears.

I'm using the latest version of everything else.

{
    "@tailwindcss/jit": "^0.1.10",
    "@tailwindcss/typography": "^0.4.0",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.8",
    "postcss-focus-visible": "^5.0.0",
    "postcss-loader": "^5.2.0",
    "postcss-nesting": "^7.0.1",
    "tailwindcss": "^2.0.4",
}

In input search, once words are typed an x shows up but when dark mode is used the x is not visible due to color, but there is no way to update this during the dark mode.

I have upgraded to Tailwind 2.0 which builds successfully in Gatsby but as soon as I replace @tailwindcss/custom-forms with @tailwindcss/forms I get the following build error:

success write out requires - 0.129s
success run static queries - 0.316s - 8/8 25.30/s
success run page queries - 0.209s - 44/44 210.51/s
success Generating image thumbnails - 12.735s - 52/52 4.08/s
error undefined failed

Cannot read property 'none' of undefined
error undefined failed

Cannot read property 'none' of undefined
error undefined failed

Cannot read property 'none' of undefined
failed Building development bundle - 16.430s

I've run npm install tailwindcss@latest postcss@latest autoprefixer@latest

Any help would be greatly appreciated.

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:

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

<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)

It doesn't seem to use the value attribute and defaults to "mm/dd/yyyy" no matter what.

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?

I am trying styling a form and all borders of inputs are hidden and that isn't default behavior for them.

Hello, I am seeing a strange bug with checkboxes on safari. It doesn't apply styling when I am using this as a plugin.

E.g on safari I see this:

I added it as a plugin to tailwind.config.js, as you can see it applies styling correctly to the inputs (except checkbox). Now comes the strange part, if I add

  <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/[email protected]/dist/forms.min.css" />

after my app.css, it works 😄

So wondering if I am missing something here. Running pretty much default everything. Only have

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

in my app.css 🤔

and tailwind.config.js is default

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

package versions

 "tailwindcss": "^2.0.1",
 "@tailwindcss/forms": "^0.2.1",

any ideas what I could be missing, or is this a bug? Let me know if there is any other information I can supply, thanks.

Creating a brand new Vue3 app with the Tailwind 2.0 compatibility build, then adding @tailwindcss/forms causes the error shown below in the app build.

Dep optimization failed with error:
(node:17868) UnhandledPromiseRejectionWarning: Error: 'promisify' is not exported 
by __browser-external, imported by node_modules/purgecss/lib/purgecss.esm.js

The error occurs as soon as @tailwindcss/forms is added to node_modules, regardless of it being required as plugin in tailwind.config.js. Removing the dependency with npm fixes the build.

Is there a compatibility build of @tailwindcss/forms that I need to use with Vite, or do I need to wait for Vite to update to PostCSS 8?

There's an example repo here that replicates the problem:
https://github.com/jim0thy/tailwindcss-forms-vite-test

My set-up is:
OS: MacOS 11.1
Node: v14.15.4
npm: v6.14.10

Hi Tailwind's Team

According to wcag 2.1 graphic elements should have a contrast of at least 3:1
A border colour with a higher contrast than #d1d5db should be proposed as a default.

The same goes for the contrasts of the placeholders. These should have a contrast of at least 4.5:1.

https://www.w3.org/TR/WCAG21/#non-text-contrast

https://www.w3.org/TR/WCAG21/#contrast-minimum

When using this package it seems to cause any classes like focus:outline-none or project wide configuration for outlines such as:

  corePlugins: {
    outline: false,
  }

to be ignored.

Hi, thank you so much for this wonderful plugin. I encounter a problem and stuck there with no luck.
I had already tried this method: tailwindlabs/tailwindcss-custom-forms#37

This is the current code

<div class="mt-2">
  <label class="inline-flex items-center">
    <input
      type="radio"
      class="form-radio focus:shadow-none focus:outline-none focus:bg-opacity-0"
      name="privacyType"
      value="private"
    />
    <span class="ml-2">Private</span>
  </label>
  <label class="inline-flex items-center ml-6">
    <input
      type="radio"
      class="form-radio focus:shadow-none focus:outline-none focus:border-transparent"
      name="privacyType"
      value="public"
    />
    <span class="ml-2">Public</span>
  </label>
</div>

Goal: Want to disable this focus ring

@adamwathan Is there a way to override the styles of the form elements using tailwind.config.js similar to @tailwindcss/typography? The reason why ask this is because, ever since I upgrade to tailwind css v2, the buttons have a default outline for element focus in blue and I am not sure what is causing it and how to get rid of it. I can't seem to reproduce this on the tailwind ui examples. This is something that is happening to text elements as well and I would either prefer using a different color or remove it altogether.

https://tailwindui.com/components/application-ui/lists/grid-lists#component-5d72b187beb968e12db89fe49f272b18

Here is an example that shows what's happening: https://play.tailwindcss.com/bz1AKpJywn

I was unable to remove a very subtle white outline (seems to be a box-shadow) from a checkbox even when using classes border-none focus:ring-0 focus:shadow-none.

I only managed to remove it by adding style="box-shadow: none" to the input.

Since this plugin targets [type] instead of input [type], anything in the DOM with a type attribute gets styled as an input. That's certainly not what we want.

Hello, you look link https://developer.mozilla.org/ru/docs/Web/HTML/Element/datalist
add more, please.

Hi,

how to customize borders (width, colors, ...) of inputs with tailwind.config.js ?

Best regards

When I use the package in a project, the background-image of checkboxes and radios doesn't put the content of the url() in quotes, thus leading to Safari stating that this is an "Unsupported property value".

[type="checkbox"]:checked {
    background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e);
}

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?

Installed the plugin on a nextjs app. It builds and runs without any complaints, but I don't think the styles are being applied correctly. As you can see from the screenshot, while the classes applied to select work, the default select {} rules exposed by this plugin do not (e.g.: all the background-* properties), so the caret is just hanging there completely to the right.

tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
}

dependencies in package.json

  "dependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "autoprefixer": "^10.1.0",
    "next": "10.0.3",
    "postcss": "^8.2.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tailwindcss": "^2.0.2"
  },

custom <Select />

function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return <select {...props} className="w-full p-2 border border-black border-solid border-opacity-10" />
}

I was under the impression that this repo effectively replaces the custom forms repo at https://github.com/tailwindlabs/tailwindcss-custom-forms

I can see the approach is different and that's totally fine but I'm finding myself missing the ability to style checkboxes etc with more control. The defaults and flexibility that custom forms gave was heaven despite it not being truly "utility" based as per Tailwind.

@adamwathan Could you please advise on your vision here so we can taylor our approach, should we be using forms and custom forms to get where we want, or is the longer term plan to abandon custom forms and bring in some of that fancier stuff into this repo in future perhaps?

Followed the install instructions

npm install @tailwindcss/forms

Then required the plugin in tailwind.config.js

// tailwind.config.js

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

But when mousing over the @tailwindcss/forms the following message is displayed:

module "/Users/user/Desktop/Index/git/project/react/node_modules/@tailwindcss/forms/src/index" Could not find a declaration file for module '@tailwindcss/forms'. '/Users/user/Desktop/Index/git/project/react/node_modules/@tailwindcss/forms/src/index.js' implicitly has an 'any' type. Try npm install @types/tailwindcss__formsif it exists or add a new declaration (.d.ts) file containingdeclare module '@tailwindcss/forms';ts(7016)

So far no joy...

PS: I was previously using custom-forms with the same error. Opened an issue with the same content under that project. Sorry if it is cross posting but I am experiencing the same issue with both packages...

I'm trying to change the color of a checkbox, it works for the checkbox itself, but not for the outline of the checkbox.

<input type="checkbox" class="rounded text-indigo-500 ring-indigo-300">

Is there any way to force this? Or is it a bug?

What version of @tailwindcss/forms are you using?

v0.3.0

What version of Node.js are you using?

12.16

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

NA

Upgrading from v0.2.0 to v0.3.0 removes all input styling.

Is there a migration step somewhere I missed?

Code:

<input className={`block w-full placeholder-gray-400 border-gray-300 focus:ring-java-500 focus:border-java-500 rounded px-3 py-2`}
 />

Before (0.2):

After (0.3):

If the font size of a select field is changed, the height of the field does not adjust and the text is cut off.

Code for reproducing:

<select className="text-xxl">
      <option>default size</option>
</select>
<input type="text" className="text-xxl"/>

Images:

What version of @tailwindcss/forms are you using?

0.3.2

What version of Node.js are you using?

12.19.1

What browser are you using?

Microsoft Edge Chromium

What operating system are you using?

Artix Linux

Reproduction repository

https://github.com/Mdsp9070/tailwind-forms-bug-reproduction

I successfully added @tailwindcss/custom-forms to my Elixir Phoenix project.

However it seems that any form-* style class don't add some styles or add none at all.

Versions
tailwind: 2.0.3
postcss: 8.2.6

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')
const plugin = require('tailwindcss/plugin')
const Color = require('color')

module.exports = {
  purge: [
    '../lib/**/*.ex',
    '../lib/**/*.leex',
    '../lib/**/*.eex',
    './js/**/*.js'
  ],
  theme: {
    themeVariants: ['dark'],
    colors: {
      transparent: 'transparent',
      white: '#ffffff',
      black: '#000000',
      gray: {
        '50': '#f9fafb',
        '100': '#f4f5f7',
        '200': '#e5e7eb',
        '300': '#d5d6d7',
        '400': '#9e9e9e',
        '500': '#707275',
        '600': '#4c4f52',
        '700': '#24262d',
        '800': '#1a1c23',
        '900': '#121317',
      },
      'cool-gray': {
        '50': '#fbfdfe',
        '100': '#f1f5f9',
        '200': '#e2e8f0',
        '300': '#cfd8e3',
        '400': '#97a6ba',
        '500': '#64748b',
        '600': '#475569',
        '700': '#364152',
        '800': '#27303f',
        '900': '#1a202e',
      },
      red: {
        '50': '#fdf2f2',
        '100': '#fde8e8',
        '200': '#fbd5d5',
        '300': '#f8b4b4',
        '400': '#f98080',
        '500': '#f05252',
        '600': '#e02424',
        '700': '#c81e1e',
        '800': '#9b1c1c',
        '900': '#771d1d',
      },
      orange: {
        '50': '#fff8f1',
        '100': '#feecdc',
        '200': '#fcd9bd',
        '300': '#fdba8c',
        '400': '#ff8a4c',
        '500': '#ff5a1f',
        '600': '#d03801',
        '700': '#b43403',
        '800': '#8a2c0d',
        '900': '#771d1d',
      },
      yellow: {
        '50': '#fdfdea',
        '100': '#fdf6b2',
        '200': '#fce96a',
        '300': '#faca15',
        '400': '#e3a008',
        '500': '#c27803',
        '600': '#9f580a',
        '700': '#8e4b10',
        '800': '#723b13',
        '900': '#633112',
      },
      green: {
        '50': '#f3faf7',
        '100': '#def7ec',
        '200': '#bcf0da',
        '300': '#84e1bc',
        '400': '#31c48d',
        '500': '#0e9f6e',
        '600': '#057a55',
        '700': '#046c4e',
        '800': '#03543f',
        '900': '#014737',
      },
      teal: {
        '50': '#edfafa',
        '100': '#d5f5f6',
        '200': '#afecef',
        '300': '#7edce2',
        '400': '#16bdca',
        '500': '#0694a2',
        '600': '#047481',
        '700': '#036672',
        '800': '#05505c',
        '900': '#014451',
      },
      blue: {
        '50': '#ebf5ff',
        '100': '#e1effe',
        '200': '#c3ddfd',
        '300': '#a4cafe',
        '400': '#76a9fa',
        '500': '#3f83f8',
        '600': '#1c64f2',
        '700': '#1a56db',
        '800': '#1e429f',
        '900': '#233876',
      },
      indigo: {
        '50': '#f0f5ff',
        '100': '#e5edff',
        '200': '#cddbfe',
        '300': '#b4c6fc',
        '400': '#8da2fb',
        '500': '#6875f5',
        '600': '#5850ec',
        '700': '#5145cd',
        '800': '#42389d',
        '900': '#362f78',
      },
      purple: {
        '50': '#f6f5ff',
        '100': '#edebfe',
        '200': '#dcd7fe',
        '300': '#cabffd',
        '400': '#ac94fa',
        '500': '#9061f9',
        '600': '#7e3af2',
        '700': '#6c2bd9',
        '800': '#5521b5',
        '900': '#4a1d96',
      },
      pink: {
        '50': '#fdf2f8',
        '100': '#fce8f3',
        '200': '#fad1e8',
        '300': '#f8b4d9',
        '400': '#f17eb8',
        '500': '#e74694',
        '600': '#d61f69',
        '700': '#bf125d',
        '800': '#99154b',
        '900': '#751a3d',
      },
    },
    extend: {
      maxHeight: {
        '0': '0',
        xl: '36rem',
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      animation: {
    fadeIn: "fadeIn 2s ease-in forwards"
  },
       keyframes: {
         fadeIn: {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 }
        }
  }
    },
  },
  variants: {
    backgroundColor: [
      'hover',
      'focus',
      'active',
      'odd',
      'dark',
      'dark:hover',
      'dark:focus',
      'dark:active',
      'dark:odd',
    ],
    display: ['responsive', 'dark'],
    textColor: [
      'focus-within',
      'hover',
      'active',
      'dark',
      'dark:focus-within',
      'dark:hover',
      'dark:active',
    ],
    placeholderColor: ['focus', 'dark', 'dark:focus'],
    borderColor: ['focus', 'hover', 'dark', 'dark:focus', 'dark:hover'],
    divideColor: ['dark'],
    boxShadow: ['focus', 'dark:focus'],
    animation: ["motion-safe"]
  },
  plugins: [
    require('tailwindcss-multi-theme'),
    require('@tailwindcss/forms')(
      strategy: 'class'
    ),
    plugin(({ addUtilities, e, theme, variants }) => {
      const newUtilities = {}
      Object.entries(theme('colors')).map(([name, value]) => {
        if (name === 'transparent' || name === 'current') return
        const color = value[300] ? value[300] : value
        const hsla = Color(color).alpha(0.45).hsl().string()

        newUtilities[`.shadow-outline-${name}`] = {
          'box-shadow': `0 0 0 3px ${hsla}`,
        }
      })

      addUtilities(newUtilities, variants('boxShadow'))
    }),
  ],
}

form components
app.scss

/* This file is for your main application css. */

/* Tailwind Directives */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* AOS styles  */
@import "../node_modules/aos/src/sass/aos";

/* components */
@import "./components/form.css";

@import "../node_modules/nprogress/nprogress.css";

[hidden] {
  display: none !important;
}

@media (min-width: 1024px) {
  .top-navbar {
    display: inline-flex !important;
  }

/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-disconnected {
  cursor: wait;
}
.phx-disconnected * {
  pointer-events: none;
}

.phx-modal {
  opacity: 1 !important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.phx-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Alerts and form errors */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert:empty {
  display: none;
}
.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}
}

form.css

/* common components for CONTS */

.basic-form-input {
  @apply form-input block w-full mt-1 text-sm;
}

.basic-form-label {
  @aplly block mt-4 text-sm;
}

How I use
I created a new input/2 function that have this custom classes basic-form*, as:

defmodule Conts.InputHelpers do
  @moduledoc """
  Define <%= input f, :pass, type: :password_input %> syntax
  to create dynamic form inputs
  """

  use Phoenix.HTML

  alias Phoenix.HTML.Form, as: PhxForm
  import ContsWeb.ErrorHelpers, only: [error_tag: 2]

  @label_opts "basic-form-label"
  @input_opts "basic-form-input"

  def input(form, field, opts \\ []) do
    label_text = opts[:label] || humanize(field)
    type = opts[:type] || PhxForm.input_type(form, field)

    label_opts = [class: @label_opts]
    input_opts = [class: "#{@input_opts} #{state_class(form, field)}"]

    label_opts = if opts[:id], do: [for: opts[:for]] ++ label_opts, else: label_opts

    content_tag :fieldset do
      label = label(form, field, label_text, label_opts)
      input = input(type, form, field, input_opts)
      error = error_tag(form, field)

      error = if Enum.empty?(error), do: "", else: error

      [label, input, error]
    end
  end

  defp state_class(form, field) do
    cond do
      # The form was not yet submitted
      !form.action -> ""
      form.errors[field] -> "border-red-500"
      true -> "border-blue-500"
    end
  end

  # Implement clauses below for custom inputs.
  # defp input(:datepicker, form, field, input_opts) do
  #   raise "not yet implemented"
  # end
  defp input(:password_confirmation, form, field, input_opts) do
    apply(PhxForm, :password, [form, field, input_opts])
  end

  defp input(type, form, field, input_opts) do
    apply(PhxForm, type, [form, field, input_opts])
  end
end

Screenshot
No focus:

With focus:

Input inspect styles:

Maybe can be a newbie error from my part but I'm not getting how to debbug or solve this issue.

Actually, in the reproduction repository it worked! But I'm not getting how I could debug my original application!

To make the reproduction repository works you need:
Elixir: > 1.7
Phoenix: 1.5.8
yarn: 1.22.10

Steps:

1. Clone repo
2. mix do deps.get, deps.compile
3. yarn --cwd assets
4. mix ecto.setup
5. mix phx.server

See this screenshot of the ìndex.html file with bg-indigo-200 added to the classes of the textarea: The "grabber" of the textarea has a white background, no matter what. This isn't the case normally, but going through the source of this plugin I have no idea what causes the issue. Help would be appreciated.

Edit: For comparison, here's a screenshot of the doc page for the resize utilities where I added bg-emerald-200 to one of the textareas. For an illustration of why this is not some obscure use-case, take a look at this screenshot of an app where I'm currently implementing dark-mode.

Hello, I use emberjs, along with the ember-power-select addon for custom select boxes. Ember-power-select uses a div for the select trigger and not a select element. Previously I was able to style it with tailwind-custom-forms using a form-select class, but now I can't.

Its great that we don't need to add these classes to normal form elements, but sometimes we need to style a non-form element as one, and these classes made it easy.

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!

Hi,
I tried to add the forms plugin to my vite/vue3/typescript app following the provided instructions, and nothing has changed after the installation.

I've tried the popular "nohoist" solution, removing all node modules and also using projects on other issues which has claimed to solve the issue. All does not work with no error shown.
"workspaces": { "nohoist": [ "@tailwindcss/forms", "@tailwindcss/forms/**", /***separately***/ "**/tailwindcss", "**/@tailwindcss/**" ] }

I am wondering if there is anything that could be the issue?

Thanks in advance!

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

Output when running (radio and checkbox lose styling):

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

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

It's currently not possible to use tailwindcss-forms on a strict policy without adding a style-src: data: which, as stated by MDN, is insecure and not recommended.

I there a way to disable/remove/override built-in icons? I tried a custom theme config, but it didn't work (I'm probably doing it wrong).

customForms: (theme) => ({
  default: {
    select: {
      backgroundImage: 'none',
    },
  },
}),

The violation is triggered here:

Upon trying to migrate an app/site over to Tailwind, we may want to utilize tailwindcss-forms (since it seems like the path forward), but this is currently an all-or-nothing approach. The Bootstrap app I'm currently migrating is so vast that I'm not sure about everywhere that form fields are even being used.

I'm wondering if it's possible to configure something to use similar to tailwind-custom-forms where we can opt into a class required on form elements where we want tailwindcss-forms to take over.

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?

hello everyone
how do i use number in decimal to specify the price of a product?

thx

Hi everyone,

I tried to install Tailwind Forms but nothing changes to my checkboxes.

This is what I did:

1. npm install @tailwindcss/forms
2. Add require('@tailwindcss/forms') to the plugin section of tailwind.config.js
3. Run npm run dev (Laravel)

I didn't get any errors, but nothing changes in my browser.

And according to the docs I did not have to change anything to my HTML, just at the type="checkbox" attribute.

Does anyone know what happens?

I need css file to add in my website

Would it be possible to split the plugin in two - one for the "reset" part and one for the (opinionated) styling?

I'm in a situation where I want to "invert" the styling of radio buttons and checkbox compared to the default styles in this package, e.g. I want white background and a colored checkmark on the checkboxes - but that's currently not doable without undoing/overriding a lot of the CSS.

Ideally, I would just add the "reset" styles and do my own styling using tailwind classes and my own base styles.

I would love to have a consistent default appearance of buttons across browsers and operating systems to build upon and not have to worry about testing to see if I missed some style.

My css is compiled with the reset happening last, so it overrides all the utility classes.

In my tailwind.conf.js:

  plugins: [
    require('@tailwindcss/forms'),
  ]

In my webpack.mix.js

  .postCss('resources/css/app.css', 'public/css', [
    tailwindcss
  ])

Is there a way to get the forms plugin compiling earlier?

When applying focus ring for both light as dark mode and enabling dark mode, an input element with type=text does not get a ring-inset on focus (while applying dark:focus:ring-inset). Screenshot attached showing that for dark mode the tw-ring-offset is var(--tw-empty) which does not look good. Dark mode is enabled through a class, but I do not get a ring inset.

The HTML code snippet:

<input 
  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 
    focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:focus:ring-green-900 
    dark:focus:ring-opacity-0 dark:focus:border-green-900 dark:focus:ring-inset 
    dark:focus:ring-4"
  type="text"
  name="name"
  id="name"
  required
/>

Tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

module.exports = {
  purge: {
    content: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js', './lib/**/*.js'],
    options: {
      safelist: ['type'], // [type='checkbox']
    },
  },
  darkMode: 'class',
  theme: {
    extend: {
      spacing: {
        '9/16': '56.25%',
      },
      lineHeight: {
        11: '2.75rem',
        12: '3rem',
        13: '3.25rem',
        14: '3.5rem',
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        blue: colors.lightBlue,
        code: {
          green: '#b5f4a5',
          yellow: '#ffe484',
          purple: '#d9a9ff',
          red: '#ff8383',
          blue: '#93ddfd',
          white: '#fff',
        },
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.700'),
            a: {
              color: theme('colors.blue.500'),
              '&:hover': {
                color: theme('colors.blue.600'),
              },
              code: { color: theme('colors.blue.400') },
            },
            h1: {
              fontWeight: '700',
              letterSpacing: theme('letterSpacing.tight'),
              color: theme('colors.gray.900'),
            },
            h2: {
              fontWeight: '700',
              letterSpacing: theme('letterSpacing.tight'),
              color: theme('colors.gray.900'),
            },
            h3: {
              fontWeight: '600',
              color: theme('colors.gray.900'),
            },
            'h4,h5,h6': {
              color: theme('colors.gray.900'),
            },
            code: {
              color: theme('colors.pink.500'),
              backgroundColor: theme('colors.gray.100'),
              paddingLeft: '4px',
              paddingRight: '4px',
              paddingTop: '2px',
              paddingBottom: '2px',
              borderRadius: '0.25rem',
            },
            'code:before': {
              content: 'none',
            },
            'code:after': {
              content: 'none',
            },
            hr: { borderColor: theme('colors.gray.200') },
            'ol li:before': {
              fontWeight: '600',
              color: theme('colors.gray.500'),
            },
            'ul li:before': {
              backgroundColor: theme('colors.gray.500'),
            },
            strong: { color: theme('colors.gray.600') },
            blockquote: {
              color: theme('colors.gray.900'),
              borderLeftColor: theme('colors.gray.200'),
            },
          },
        },
        dark: {
          css: {
            color: theme('colors.gray.300'),
            a: {
              color: theme('colors.blue.500'),
              '&:hover': {
                color: theme('colors.blue.400'),
              },
              code: { color: theme('colors.blue.400') },
            },
            h1: {
              fontWeight: '700',
              letterSpacing: theme('letterSpacing.tight'),
              color: theme('colors.gray.100'),
            },
            h2: {
              fontWeight: '700',
              letterSpacing: theme('letterSpacing.tight'),
              color: theme('colors.gray.100'),
            },
            h3: {
              fontWeight: '600',
              color: theme('colors.gray.100'),
            },
            'h4,h5,h6': {
              color: theme('colors.gray.100'),
            },
            code: {
              backgroundColor: theme('colors.gray.800'),
            },
            hr: { borderColor: theme('colors.gray.700') },
            'ol li:before': {
              fontWeight: '600',
              color: theme('colors.gray.400'),
            },
            'ul li:before': {
              backgroundColor: theme('colors.gray.400'),
            },
            strong: { color: theme('colors.gray.100') },
            thead: {
              color: theme('colors.gray.100'),
            },
            tbody: {
              tr: {
                borderBottomColor: theme('colors.gray.700'),
              },
            },
            blockquote: {
              color: theme('colors.gray.100'),
              borderLeftColor: theme('colors.gray.700'),
            },
          },
        },
      }),
    },
  },
  variants: {
    typography: ['dark'],
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

I tried to create a play.tailwindcss.com link, but I don't know how to enable dark mode in the example. If someone could let me know, I can create one next time :)