Is there a way to override the styles of the form elements using tailwind.config.js

[abishekrsrikaanth]

@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

[lewebsimple]

Coming from @tailwindcss/custom-forms, it's quite difficult to configure form styles globally, i.e. change the default focus color, border width.

What is planned in this regard ?

[asivaneswaran]

To add to this, it would be cool to change the default color of the focus. Right now it sets a weird blue and I would like to change that to another color

[adamwathan]

@abishekrsrikaanth What you have shown in your screenshot is just the browser-default focus outline in Chrome, that is not coming from Tailwind, it's just how focus looks on buttons and links by default in the browser.

Here is is right here on GitHub for example:

If you'd like to change this, you can use utilities like focus:outline-none to remove that outline, then add your own custom focus styles.

---

@lewebsimple To configure form styles globally, just write the styles you want to use in CSS. I'd recommend doing it with classes, like creating your own custom form-input class like we provided in the custom forms plugin. Any API we try to expose to customize it in the config file is just going to be a worse version of CSS (this is apparent in the typography plugin too — that API sucks).

---

@asivaneswaran You can do that by writing some CSS in your CSS file, just like you would if Tailwind weren't installed at all 👍

[machiaveli88]

In https://github.com/tailwindlabs/tailwindcss-forms/blob/master/src/index.js the color blue is used as the main color. It is possible to use a color named "primary" or "form" or something like that (with blue as default) instead? Then everyone can add the new color "primary" (or "form") to the color palette in tailwind.config and does not have to manually change the colors for focus, checkbox, ... if he is not using blue as the main color.

[bilguun-zorigt]

I had to do this:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Variables */
:root {
  --primary-color: rgba(255, 230, 0, 1);
}

/* Override default focus colors for tailwindcss-forms https://github.com/tailwindlabs/tailwindcss-forms */
[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='checkbox']:focus,
[type='radio']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  --tw-ring-color: var(--primary-color);
  border-color: var(--primary-color);
}

[zwfisher]

I had to do this:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Variables */
:root {
  --primary-color: rgba(255, 230, 0, 1);
}

/* Override default focus colors for tailwindcss-forms https://github.com/tailwindlabs/tailwindcss-forms */
[type='text']:focus,
...

This worked perfectly for me. Thanks!

[pinkfrog9]

Just generate the class, but not the global styles,

// tailwind.config.js
plugins: [
  require("@tailwindcss/forms")({
    // strategy: 'base', // only generate global styles
    strategy: 'class', // only generate classes
  }),
],

and in the css file,

input {
  @apply form-input;
   @apply whatever you want.
}

[fibonacid]

This is what i did to make the ring color the same as the default tailwind one:

@layer components {
  .form-select,
  .form-input,
  .form-textarea,
  .form-checkbox,
  .form-radio,
  .form-multiselect {
    border-color: theme(borderColor.DEFAULT);
  }
  .form-select:focus,
  .form-input:focus,
  .form-textarea:focus,
  .form-checkbox:focus,
  .form-radio:focus,
  .form-multiselect:focus {
    --tw-ring-color: inherit;
  }
}

[Samuelodan]

I removed the plugin because in addition to being somewhat heavy-handed, I can't seem to override the styles it applied.
Maybe I'll figure it out someday; perhaps I won't.

[morgler]

This is really unexpected and annoying. Once I use the tailwindss/forms plugin, not even the styles from the tailwindui collection look as expected anymore. And it's not only the focus, but also that fields seem to gain a gray border from the plugin.

It seems we have to override styles as the comments above suggested to get it to look right. I thought tailwind would be different from bootstrap & co in that regard. Hope I just understood something wrong (then please help!) or a solution is coming.

[morgler]

My bad. Here is what happened to me:

I removed the forms plugin and then the tailwindui components didn't work correctly. BUT: I was on tailwind v3 while using the v4 ui components (I missed the recent major update).

So if you have problems, check your tailwind version against the tailwindui version. Make sure they match.