focus-visible adds box-shadow with JIT

[sklawren]

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.

[sklawren]

Here is the element as rendered in the browser when it has focus:

<input aria-invalid="false" autocomplete="off" class="block w-full focus-visible:ring mt-1 focus-visible" id="test" name="Input Field" placeholder="Type something here" type="text" value="" data-focus-visible-added="">

Here are two screenshots of the inspector of that input field with normal compilation and JIT.

Normal

JIT

For some reason, the JIT compiler is adding those extra styles. This is across the board for other form elements such as select, checkbox, radio, etc.

[roberttravispierce]

I'm seeing the same issue with form select element styling (gradient background, small height, svg down arrow on right) after moving to JIT. I reverted back from JIT and still am seeing it so I'm thinking something happened during the install that messed up the @tailwind/forms styling or precedence. I'm investigating.

[roberttravispierce]

I couldn't figure it out in a reasonable amount of time, so I ended up just grabbing "select" styles from @tailwindcss/forms and putting them in custom stylesheet for higher precedence. Unsatisfying and not ideal, but I'll revisit later. It's working now and bigger fish to fry. :)

// javascript/components/forms.scss
// These three "select" styles are resets from tailwindcss/forms.css styles - Fixes something clobbering them along the way.
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  border-color: #2563eb;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
}

[bradlc]

Hey @sklawren. I'm going to close this issue because I'm pretty sure that it was fixed in #81. If not please open a new issue with a proper reproduction — a Tailwind Play if the issue can be reproduced there, or a GitHub repository where you already have everything all set up so we can clone it and immediately see the issue without configuring everything by hand.