Add new outline style, color, width and offset utilities (#5887)

* Add new outline style, color, width and offset utilities

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Remove old `outline` property from default config

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Tweak order of outline plugins

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Revert to previous `outline-none` styles

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Drop quotes from outline property

* Add offset back to `outline-none` utility

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

src/corePlugins.js

@@ -1794,17 +1794,36 @@ export let corePlugins = {
     }
   })(),
 
-  outline: ({ matchUtilities, theme }) => {
+  outlineStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.outline-none': {
+        outline: '2px solid transparent',
+        'outline-offset': '2px',
+      },
+      '.outline': { 'outline-style': 'solid' },
+      '.outline-dashed': { 'outline-style': 'dashed' },
+      '.outline-dotted': { 'outline-style': 'dotted' },
+      '.outline-double': { 'outline-style': 'double' },
+      '.outline-hidden': { 'outline-style': 'hidden' },
+    })
+  },
+
+  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(
       {
         outline: (value) => {
-          value = Array.isArray(value) ? value : value.split(',')
-          let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
-
-          return { outline, 'outline-offset': outlineOffset }
+          return { 'outline-color': toColorValue(value) }
         },
       },
-      { values: theme('outline') }
+      { values: flattenColorPalette(theme('outlineColor')), type: ['color'] }
     )
   },
 

stubs/defaultConfig.stub.js

@@ -697,14 +697,24 @@ module.exports = {
       11: '11',
       12: '12',
     },
-    outline: {
-      none: ['2px solid transparent', '2px'],
-      white: ['2px dotted white', '2px'],
-      black: ['2px dotted black', '2px'],
-    },
     padding: ({ theme }) => theme('spacing'),
     placeholderColor: ({ theme }) => theme('colors'),
     placeholderOpacity: ({ theme }) => theme('opacity'),
+    outlineColor: ({ theme }) => theme('colors'),
+    outlineOffset: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    outlineWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     ringColor: ({ theme }) => ({
       DEFAULT: theme('colors.blue.500', '#3b82f6'),
       ...theme('colors'),

tests/arbitrary-values.test.css

@@ -859,25 +859,20 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.outline-\[2px_solid_black\] {
-  outline: 2px solid black;
-  outline-offset: 0;
+.outline-\[10px\] {
+  outline-width: 10px;
 }
-.outline-\[2px_solid_black\2c 2px\] {
-  outline: 2px solid black;
-  outline-offset: 2px;
+.outline-\[length\:var\(--outline\)\] {
+  outline-width: var(--outline);
 }
-.outline-\[var\(--outline\)\] {
-  outline: var(--outline);
-  outline-offset: 0;
+.outline-offset-\[10px\] {
+  outline-offset: 10px;
 }
-.outline-\[var\(--outline\)\2c 3px\] {
-  outline: var(--outline);
-  outline-offset: 3px;
+.outline-\[black\] {
+  outline-color: black;
 }
-.outline-\[2px_solid_black\2c var\(--outline-offset\)\] {
-  outline: 2px solid black;
-  outline-offset: var(--outline-offset);
+.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)

tests/arbitrary-values.test.html

@@ -321,11 +321,11 @@
     <div class="shadow-[0px_1px_2px_black]"></div>
     <div class="shadow-[var(--value)]"></div>
 
-    <div class="outline-[2px_solid_black]"></div>
-    <div class="outline-[2px_solid_black,2px]"></div>
-    <div class="outline-[var(--outline)]"></div>
-    <div class="outline-[var(--outline),3px]"></div>
-    <div class="outline-[2px_solid_black,var(--outline-offset)]"></div>
+    <div class="outline-[black]"></div>
+    <div class="outline-[10px]"></div>
+    <div class="outline-[color:var(--outline)]"></div>
+    <div class="outline-[length:var(--outline)]"></div>
+    <div class="outline-offset-[10px]"></div>
 
     <div class="ring-[#76ad65]"></div>
     <div class="ring-[color:var(--value)]"></div>

tests/basic-usage.test.css

@@ -825,10 +825,21 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.outline-black {
-  outline: 2px dotted black;
+.outline {
+  outline-style: solid;
+}
+.outline-dashed {
+  outline-style: dashed;
+}
+.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);

tests/basic-usage.test.html

@@ -97,7 +97,7 @@
     <div class="bg-blend-darken bg-blend-difference"></div>
     <div class="mix-blend-multiply mix-blend-saturation"></div>
     <div class="order-last order-2"></div>
-    <div class="outline-none outline-black"></div>
+    <div class="outline outline-dashed outline-none outline-black outline-4 outline-offset-2"></div>
     <div class="overflow-hidden"></div>
     <div class="overscroll-contain"></div>
     <div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>

tests/raw-content.test.css

@@ -595,14 +595,6 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.outline-black {
-  outline: 2px dotted black;
-  outline-offset: 2px;
-}
 .ring {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
     var(--tw-ring-offset-color);

tests/raw-content.test.html

@@ -93,7 +93,6 @@
     <div class="bg-blend-darken bg-blend-difference"></div>
     <div class="mix-blend-multiply mix-blend-saturation"></div>
     <div class="order-last order-2"></div>
-    <div class="outline-none outline-black"></div>
     <div class="overflow-hidden"></div>
     <div class="overscroll-contain"></div>
     <div class="scroll-smooth"></div>