WIP

src/plugins/borderColor.js

@@ -3,20 +3,38 @@ import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ config, addBase, matchUtilities, theme, variants, corePlugins }) {
-    if (!corePlugins('borderOpacity')) {
-      addBase({
-        '*, ::before, ::after': {
-          'border-color': theme('borderColor.DEFAULT', 'currentColor'),
-        },
-      })
+    if (config('mode') === 'jit') {
+      if (!corePlugins('borderOpacity')) {
+        addBase({
+          '*::tailwind': {
+            'border-color': theme('borderColor.DEFAULT', 'currentColor'),
+          },
+        })
+      } else {
+        addBase({
+          '*::tailwind': withAlphaVariable({
+            color: theme('borderColor.DEFAULT', 'currentColor'),
+            property: 'border-color',
+            variable: '--tw-border-opacity',
+          }),
+        })
+      }
     } else {
-      addBase({
-        '*, ::before, ::after': withAlphaVariable({
-          color: theme('borderColor.DEFAULT', 'currentColor'),
-          property: 'border-color',
-          variable: '--tw-border-opacity',
-        }),
-      })
+      if (!corePlugins('borderOpacity')) {
+        addBase({
+          '*, ::before, ::after': {
+            'border-color': theme('borderColor.DEFAULT', 'currentColor'),
+          },
+        })
+      } else {
+        addBase({
+          '*, ::before, ::after': withAlphaVariable({
+            color: theme('borderColor.DEFAULT', 'currentColor'),
+            property: 'border-color',
+            variable: '--tw-border-opacity',
+          }),
+        })
+      }
     }
 
     matchUtilities(

tests/jit/optimize-universal-selectors.test.js

@@ -443,3 +443,46 @@ test('with apply', async () => {
     `)
   })
 })
+
+test('with borders', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="border border-red-500 md:border-2"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .border,
+      .md\\:border-2 {
+        --tw-border-opacity: 1;
+        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+      }
+      /* --- */
+      .border {
+        border-width: 1px;
+      }
+      .border-red-500 {
+        --tw-border-opacity: 1;
+        border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+      }
+      @media (min-width: 768px) {
+        .md\\:border-2 {
+          border-width: 2px;
+        }
+      }
+    `)
+  })
+})