Does not inherit config ring settings

[sklawren]

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?

[adevade]

Just discovered this as well as I was updating from the old Custom Forms plugin. Can't even override the color with utility classes. I'll see if I can find the problem and maybe open a PR.

[adevade]

Already one open with a related issue: #44.

I also found that the latest published tag (v0.1.4) has the wrong CSS ring variable names. --ring-* instead of the new prefixed --tw-ring-*. I guess that's why I can't override the ring color with utilities?

Any reason for not tagging v0.2.0 yet?

EDIT: Error was on my end. npm didn't update to latest version for some reason. Deleting node_modules + lock and installing again got it working with overriding via utility classes.

Also, v0.2.0 and v0.2.1 is tagged on npm but not here on GitHub. That's what confused me.

[adamwathan]

Hey! We don't use the default ring color even by default (we use blue 600 which is not the default ring utility color in Tailwind), so I don't think it makes sense to inherit that from the user's config. We will pull in your own blue-600 if you've edited it, but if you want to just specify your own overrides for this plugin in general you should do so via CSS:

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

  /* ... */
}

[sklawren]

@adamwathan But the ring isn't just border color when you focus. There's a box-shadow, as well, which also uses the same blue-600, and the box-shadow is slightly different on different form elements (select is different than input, etc.)

It would be so much easier (and tailwind-y) if we could just set the ring/focus color that is used in the configuration (even if that setting is not inherited from the tailwind base).

This single fixed focus color doesn't account for dark mode (or other theming) and thus requires manual labor digging into the inspector to figure out what the box-shadow settings are for each element, etc.

For example, this is what I had to do for my dark mode for just input, select, radio, and checkbox.

.dark {
    & input.focus-visible,
    & select.focus-visible {
        box-shadow: 0 0 0 0 #1c273a, 0 0 0 3px #7d75c1, 0 0 #0000;
    }

    & input[type='checkbox']:focus,
    & input[type='radio']:focus {
        box-shadow: 0 0 0 2px #1c273a, 0 0 0 4px #7d75c1, 0 0 #0000;
    }
}

Obviously, for dark mode, the background color matters, since white is probably not what you want on the first box-shadow parameter. This should probably be configurable, as well.

[clluiz]

Same problem here. Any good solution to override these colors?

[sklawren]

@clluiz Since this is no longer an issue about inheriting ring color, but instead about a feature request to add a configuration setting, I've started a feature request thread here.

tailwindlabs/tailwindcss#3868 (comment)

[rasmuscnielsen]

For anyone just wanting to tweak the default focus styles a bit, I found the following CSS to be a good starting point for my own use case:

@layer base {
    [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='time']:focus,
    [type='week']:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        --tw-ring-color: #93c5fd;
        border-color: var(--tw-ring-color);
    }

    [type="checkbox"],
    [type="radio"] {
        color: #3b82f6;
    }

    [type="checkbox"]:focus,
    [type="radio"]:focus {
        --tw-ring-color: #93c5fd;
    }

    button:focus,
    a:focus {
        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
        border-color: #93c5fd;
        outline: none;
    }
}

(changes the ring and checbox/radio colors to a bit lighter blue than the default - colors can easily be changed to your preference)

[adam-marshall]

@adamwathan

I don't understand why there is --tw-ring-color which in my version is defaulted to rgb(59 130 246 / 0.5),

then in CSS within this plugin, --tw-ring-color is overridden to #2563eb, which I am fine with, but only overridden within the scope of [type='text']:focus.... etc.

if I then want to reuse the same focus colour elsewhere for other components (e.g. I have an ng-select component where I am overriding its default focus styling) I cannot use --tw-ring-color for consistency, the link has been disconnected.

what would the advice then be?

I don't think the plugin needs complex configuration but it would be nice if there was some kind of middle ground, maybe another layer of CSS variables that can be declared higher up, e.g. --tw-forms-ring-color: theme('colors.blue.600'); so people can reuse those more easily?

[ShaggyDude]

Please provide access to this variable at the root level.
We all love tailwind, that's why we are here but I'd like to set this variable once and forget it.
I assume that's why it was created.

Thanks,

Sorry about my little rant ^
This seems to work fine for me

:focus {
--tw-ring-color: #93c5fd !important;
border-color: var(--tw-ring-color) !important;
}

[makemagik]

I understand people might want to use CSS to change it, and understood this is a plugin, but why couldn't you use the tailwind variable as described in the documentation?

I spent some time searching for that issue, fortunately I was not the only one and found that thread pretty quickly.

Thanks