Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Input outlines show during transition with Tailwind 3.2.6
### What version of @tailwindcss/forms are you using?

0.5.3

### What version of Node.js are you using?

18.13.0

### What browser are you using?

Chrome

### What operating system are you using?

Windows

### Reproduction repository

https://play.tailwindcss.com/irT3FCtMUB

### Describe your issue

Since https://github.com/tailwindlabs/tailwindcss/issues/10385 was merged inputs that use this plugin and the `transition` class receive an outline ring in addition to the box-shadow ring during their transition animation.

The way to fix this is to add `outline-none` to the input or apply that to all inputs in your style sheet.

`@tailwindcss/forms` sets the input's outline style to none, but only on the `:focus` state. For this to not be included in the transition it needs to be set as a base input style.

This caught me off guard when updating from Tailwind 3.2.4 to 3.2.6 and I thought it was a bug in that release. After figuring out what's going on it seems like something that should probably be fixed in this plugin since it's setting a default outline style.


Hints:
This issue is also visible on Heroicons in `Search all icons...` input
https://heroicons.com/
I too noticed flickering when `focus:outline-none` and `transition` are used at the same time.
Laravel Jetstream uses this combination.

There are two ways for a temporary fix:
- remove `outline-color` from `transition-property`
- use `outline-none` without `focus`
Thanks for reporting — working on a solution to this, will have a fix out today.

Patch:
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -879,8 +879,8 @@ module.exports = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',


Test patch:
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -1020,8 +1020,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
-    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: 0.15s;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -1020,8 +1020,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
-    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: 0.15s;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -698,9 +698,8 @@ crosscheck(() => {
         }
         @media (prefers-reduced-motion: no-preference) {
           .motion-safe\:transition {
-            transition-property: color, background-color, border-color, outline-color,
-              text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-              backdrop-filter;
+            transition-property: color, background-color, border-color, text-decoration-color, fill,
+              stroke, opacity, box-shadow, transform, filter, backdrop-filter;
             transition-duration: 0.15s;
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           }
@@ -710,9 +709,8 @@ crosscheck(() => {
         }
         @media (prefers-reduced-motion: reduce) {
           .motion-reduce\:transition {
-            transition-property: color, background-color, border-color, outline-color,
-              text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-              backdrop-filter;
+            transition-property: color, background-color, border-color, text-decoration-color, fill,
+              stroke, opacity, box-shadow, transform, filter, backdrop-filter;
             transition-duration: 0.15s;
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           }
@@ -759,9 +757,8 @@ crosscheck(() => {
           }
           @media (prefers-reduced-motion: no-preference) {
             .md\:motion-safe\:hover\:transition:hover {
-              transition-property: color, background-color, border-color, outline-color,
-                text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-                backdrop-filter;
+              transition-property: color, background-color, border-color, text-decoration-color,
+                fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
               transition-duration: 0.15s;
               transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             }
diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css
--- a/tests/raw-content.oxide.test.css
+++ b/tests/raw-content.oxide.test.css
@@ -761,8 +761,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
-    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: 0.15s;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -761,8 +761,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
-    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: 0.15s;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }