How to customize in tailwind.config.js

[Kixell-NicolasJardillier]

Hi,

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

Best regards

[Manubi]

Hi,
some of the stuff works. Some doesn't. Looking forward to get a small documenation as it would allow much faster development. It's the part wirth customForms. But it only works if you keep the form-input in your className as from the old package. https://tailwindcss-custom-forms.netlify.app/

[SaberOuarezzamen]

Hi,
First, I've tried cstuomForms it didn't work, apparently it's an old version or even an other package.
If you want to customize borders (width, colors, ...) of inputs on focus, use ring utilities : ring-color, ring-width

[yurirnascimento]

Hi,

As the plugin is now, it looks like we are limited to customizing directly in the element's class, or creating a css file and importing it as a component of our tailwind.css.

Example:
'border-color': theme('colors.gray.500', colors.gray[500]),

In order to be able to customize directly by tailwind.config.js it would be necessary to change to:
'border-color': theme('customForms.input.borderColor', colors.gray[500]),

But as I mentioned earlier, it can be customized by a css file.

forms.css
input[type='text'] { @apply border-gray-300; }

Note that I added input to the selector this is to work because of the css Precedence order. If it were a selector without the input, the style would not work.

And to the tailwind.css
@tailwind base; @tailwind components; @import "form.css"; @tailwind utilities;

For more info what selector you need to change, see the source.

[adamwathan]

Hey! The recommended way to customize things using this plugin is to just write CSS. Act like the styles in this plugin are just part of Normalize/Preflight, and layer on any additional custom base styles you want to tweak the default styles 👍

@layer base {
  [type="text"],
  [type="email"]
  /* ... */ {
    border-color: pink;
  }

  /* ... */
}

Hope that helps!

[Muffinman]

My solution was just to copy the plugin into my own project and then remove all the hard coded references. Not great.

I don't like the idea of mixing tailwind and plain CSS just for this, when I've not had to add any custom CSS for any other reason.