Tweak order of outline plugins

Co-Authored-By: Adam Wathan <[email protected]>

Author: reinink

src/corePlugins.js

@@ -1801,6 +1801,14 @@ export let corePlugins = {
     })
   },
 
+  outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
+    type: ['length', 'number', 'percentage'],
+  }),
+
+  outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
+    type: ['length', 'number', 'percentage'],
+  }),
+
   outlineColor: ({ matchUtilities, theme }) => {
     matchUtilities(
       {
@@ -1812,14 +1820,6 @@ export let corePlugins = {
     )
   },
 
-  outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
-    type: ['length', 'number', 'percentage'],
-  }),
-
-  outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
-    type: ['length', 'number', 'percentage'],
-  }),
-
   ringWidth: ({ matchUtilities, addBase, addUtilities, theme }) => {
     let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
     let ringColorDefault = withAlphaValue(

stubs/defaultConfig.stub.js

@@ -701,14 +701,14 @@ module.exports = {
     placeholderColor: ({ theme }) => theme('colors'),
     placeholderOpacity: ({ theme }) => theme('opacity'),
     outlineColor: ({ theme }) => theme('colors'),
-    outlineWidth: {
+    outlineOffset: {
       0: '0px',
       1: '1px',
       2: '2px',
       4: '4px',
       8: '8px',
     },
-    outlineOffset: {
+    outlineWidth: {
       0: '0px',
       1: '1px',
       2: '2px',

tests/arbitrary-values.test.css

@@ -859,12 +859,6 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.outline-\[black\] {
-  outline-color: black;
-}
-.outline-\[color\:var\(--outline\)\] {
-  outline-color: var(--outline);
-}
 .outline-\[10px\] {
   outline-width: 10px;
 }
@@ -874,6 +868,12 @@
 .outline-offset-\[10px\] {
   outline-offset: 10px;
 }
+.outline-\[black\] {
+  outline-color: black;
+}
+.outline-\[color\:var\(--outline\)\] {
+  outline-color: var(--outline);
+}
 .ring-\[10px\] {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
     var(--tw-ring-offset-color);

tests/basic-usage.test.css

@@ -830,15 +830,15 @@
 .outline-none {
   outline-style: none;
 }
-.outline-black {
-  outline-color: #000;
-}
 .outline-4 {
   outline-width: 4px;
 }
 .outline-offset-2 {
   outline-offset: 2px;
 }
+.outline-black {
+  outline-color: #000;
+}
 .ring {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
     var(--tw-ring-offset-color);