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})` })]
+      })
+    ),
   }
 }

tests/basic-usage.test.css

@@ -486,6 +486,14 @@
 .border-2 {
   border-width: 2px;
 }
+.border-x-4 {
+  border-left-width: 4px;
+  border-right-width: 4px;
+}
+.border-y-4 {
+  border-top-width: 4px;
+  border-bottom-width: 4px;
+}
 .border-t {
   border-top-width: 1px;
 }
@@ -502,6 +510,16 @@
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.border-x-black {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+.border-y-black {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
 .border-t-black {
   --tw-border-opacity: 1;
   border-top-color: rgb(0 0 0 / var(--tw-border-opacity));

tests/basic-usage.test.html

@@ -25,12 +25,12 @@
     <div class="bg-cover"></div>
     <div class="bg-origin-border bg-origin-padding bg-origin-content"></div>
     <div class="border-collapse"></div>
-    <div class="border-black border-t-black border-r-black border-b-black border-l-black"></div>
+    <div class="border-black border-t-black border-r-black border-b-black border-l-black border-x-black border-y-black"></div>
     <div class="border-opacity-10"></div>
     <div class="rounded-md"></div>
     <div class="border-solid border-hidden"></div>
     <div class="border"></div>
-    <div class="border-2 border-t border-b-4"></div>
+    <div class="border-2 border-t border-b-4 border-x-4 border-y-4"></div>
     <div class="shadow"></div>
     <div class="shadow-md"></div>
     <div class="shadow-lg"></div>