Add border-x-{width}, border-y-{width}, border-x-{color} and border-y-{color} utilities (#5639)

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

src/corePlugins.js

@@ -1285,6 +1285,10 @@ export default {
     'borderWidth',
     [
       ['border', [['@defaults border-width', {}], 'border-width']],
+      [
+        ['border-x', [['@defaults border-width', {}], 'border-left-width', 'border-right-width']],
+        ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
+      ],
       [
         ['border-t', [['@defaults border-width', {}], 'border-top-width']],
         ['border-r', [['@defaults border-width', {}], 'border-right-width']],
@@ -1346,6 +1350,43 @@ export default {
       }
     )
 
+    matchUtilities(
+      {
+        'border-x': (value) => {
+          if (!corePlugins('borderOpacity')) {
+            return {
+              'border-left-color': toColorValue(value),
+              'border-right-color': toColorValue(value),
+            }
+          }
+
+          return withAlphaVariable({
+            color: value,
+            property: ['border-left-color', 'border-right-color'],
+            variable: '--tw-border-opacity',
+          })
+        },
+        'border-y': (value) => {
+          if (!corePlugins('borderOpacity')) {
+            return {
+              'border-top-color': toColorValue(value),
+              'border-bottom-color': toColorValue(value),
+            }
+          }
+
+          return withAlphaVariable({
+            color: value,
+            property: ['border-top-color', 'border-bottom-color'],
+            variable: '--tw-border-opacity',
+          })
+        },
+      },
+      {
+        values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
+        type: 'color',
+      }
+    )
+
     matchUtilities(
       {
         'border-t': (value) => {

src/util/withAlphaVariable.js

@@ -15,30 +15,35 @@ export function withAlphaValue(color, alphaValue, defaultValue) {
 }
 
 export default function withAlphaVariable({ color, property, variable }) {
+  let properties = [].concat(property)
   if (typeof color === 'function') {
     return {
       [variable]: '1',
-      [property]: color({ opacityVariable: variable, opacityValue: `var(${variable})` }),
+      ...Object.fromEntries(
+        properties.map((p) => {
+          return [p, color({ opacityVariable: variable, opacityValue: `var(${variable})` })]
+        })
+      ),
     }
   }
 
   const parsed = parseColor(color)
 
   if (parsed === null) {
-    return {
-      [property]: color,
-    }
+    return Object.fromEntries(properties.map((p) => [p, color]))
   }
 
   if (parsed.alpha !== undefined) {
     // Has an alpha value, return color as-is
-    return {
-      [property]: color,
-    }
+    return Object.fromEntries(properties.map((p) => [p, color]))
   }
 
   return {
     [variable]: '1',
-    [property]: formatColor({ ...parsed, alpha: `var(${variable})` }),
+    ...Object.fromEntries(
+      properties.map((p) => {
+        return [p, formatColor({ ...parsed, alpha: `var(${variable})` })]
+      })
+    ),
   }
 }