JIT: Add per-side border colors (tailwindlabs#4404)

Author: adamwathan

src/plugins/borderColor.js

@@ -2,7 +2,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function () {
-  return function ({ addBase, matchUtilities, theme, variants, corePlugins }) {
+  return function ({ config, addBase, matchUtilities, theme, variants, corePlugins }) {
     if (!corePlugins('borderOpacity')) {
       addBase({
         '*, ::before, ::after': {
@@ -41,5 +41,71 @@ export default function () {
         type: 'color',
       }
     )
+
+    if (config('mode') === 'jit') {
+      matchUtilities(
+        {
+          'border-t': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-top-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-top-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+          'border-r': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-right-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-right-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+          'border-b': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-bottom-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-bottom-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+          'border-l': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-left-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-left-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+        },
+        {
+          values: (({ DEFAULT: _, ...colors }) => colors)(
+            flattenColorPalette(theme('borderColor'))
+          ),
+          variants: variants('borderColor'),
+          type: 'color',
+        }
+      )
+    }
   }
 }

tests/jit/basic-usage.test.css

@@ -417,6 +417,22 @@
   --tw-border-opacity: 1;
   border-color: rgba(0, 0, 0, var(--tw-border-opacity));
 }
+.border-t-black {
+  --tw-border-opacity: 1;
+  border-top-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
+.border-r-black {
+  --tw-border-opacity: 1;
+  border-right-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
+.border-b-black {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
+.border-l-black {
+  --tw-border-opacity: 1;
+  border-left-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
 .border-opacity-10 {
   --tw-border-opacity: 0.1;
 }

tests/jit/basic-usage.test.html

@@ -25,7 +25,7 @@
     <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"></div>
+    <div class="border-black border-t-black border-r-black border-b-black border-l-black"></div>
     <div class="border-opacity-10"></div>
     <div class="rounded-md"></div>
     <div class="border-solid"></div>

tests/jit/kitchen-sink.test.css

@@ -535,6 +535,9 @@ div {
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
       var(--tw-shadow);
   }
+  .md\:hover\:border-r-blue-500\/30:hover {
+    border-right-color: rgba(59, 130, 246, 0.3);
+  }
   .md\:hover\:opacity-20:hover {
     opacity: 0.2;
   }

tests/jit/kitchen-sink.test.html

@@ -16,6 +16,7 @@
     <div class="test-apply-font-variant"></div>
     <div class="mt-6"></div>
     <div class="bg-black"></div>
+    <div class="md:hover:border-r-blue-500/30"></div>
     <div class="custom-util"></div>
     <div class="hover:custom-util"></div>
     <div class="group-hover:custom-util"></div>