Add border side utilities

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -460,7 +460,13 @@ exports[`getClassList 1`] = `
   "border",
   "border-b",
   "border-b-current",
+  "border-b-dashed",
+  "border-b-dotted",
+  "border-b-double",
+  "border-b-hidden",
   "border-b-inherit",
+  "border-b-none",
+  "border-b-solid",
   "border-b-transparent",
   "border-collapse",
   "border-current",
@@ -469,22 +475,46 @@ exports[`getClassList 1`] = `
   "border-double",
   "border-e",
   "border-e-current",
+  "border-e-dashed",
+  "border-e-dotted",
+  "border-e-double",
+  "border-e-hidden",
   "border-e-inherit",
+  "border-e-none",
+  "border-e-solid",
   "border-e-transparent",
   "border-hidden",
   "border-inherit",
   "border-l",
   "border-l-current",
+  "border-l-dashed",
+  "border-l-dotted",
+  "border-l-double",
+  "border-l-hidden",
   "border-l-inherit",
+  "border-l-none",
+  "border-l-solid",
   "border-l-transparent",
   "border-none",
   "border-r",
   "border-r-current",
+  "border-r-dashed",
+  "border-r-dotted",
+  "border-r-double",
+  "border-r-hidden",
   "border-r-inherit",
+  "border-r-none",
+  "border-r-solid",
   "border-r-transparent",
   "border-s",
   "border-s-current",
+  "border-s-dashed",
+  "border-s-dotted",
+  "border-s-double",
+  "border-s-hidden",
   "border-s-inherit",
+  "border-s-none",
+  "border-s-solid",
   "border-s-transparent",
   "border-separate",
   "border-solid",
@@ -502,16 +532,34 @@ exports[`getClassList 1`] = `
   "border-spacing-y-4",
   "border-t",
   "border-t-current",
+  "border-t-dashed",
+  "border-t-dotted",
+  "border-t-double",
+  "border-t-hidden",
   "border-t-inherit",
+  "border-t-none",
+  "border-t-solid",
   "border-t-transparent",
   "border-transparent",
   "border-x",
   "border-x-current",
+  "border-x-dashed",
+  "border-x-dotted",
+  "border-x-double",
+  "border-x-hidden",
   "border-x-inherit",
+  "border-x-none",
+  "border-x-solid",
   "border-x-transparent",
   "border-y",
   "border-y-current",
+  "border-y-dashed",
+  "border-y-dotted",
+  "border-y-double",
+  "border-y-hidden",
   "border-y-inherit",
+  "border-y-none",
+  "border-y-solid",
   "border-y-transparent",
   "bottom-0.5",
   "bottom-1",

packages/tailwindcss/src/property-order.ts

@@ -200,6 +200,13 @@ export default [
   'border-left-width',
 
   'border-style',
+  'border-inline-start-style',
+  'border-inline-end-style',
+  'border-top-style',
+  'border-right-style',
+  'border-bottom-style',
+  'border-left-style',
+
   'border-color',
   'border-x-color', // Not real
   'border-y-color', // Not real

packages/tailwindcss/src/utilities.test.ts

@@ -5429,7 +5429,25 @@ test('divide-x', () => {
       initial-value: 0;
     }
 
-    @property --tw-border-style {
+    @property --tw-border-t-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-r-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-b-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-l-style {
       syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
@@ -5466,7 +5484,25 @@ test('divide-x with custom default border width', () => {
       initial-value: 0;
     }
 
-    @property --tw-border-style {
+    @property --tw-border-t-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-r-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-b-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-l-style {
       syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
@@ -5517,7 +5553,25 @@ test('divide-y', () => {
       initial-value: 0;
     }
 
-    @property --tw-border-style {
+    @property --tw-border-t-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-r-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-b-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-l-style {
       syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
@@ -5555,7 +5609,25 @@ test('divide-y with custom default border width', () => {
       initial-value: 0;
     }
 
-    @property --tw-border-style {
+    @property --tw-border-t-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-r-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-b-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-l-style {
       syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
@@ -7148,59 +7220,6 @@ test('rounded-bl', () => {
   ).toEqual('')
 })
 
-test('border-style', () => {
-  expect(
-    run([
-      'border-solid',
-      'border-dashed',
-      'border-dotted',
-      'border-double',
-      'border-hidden',
-      'border-none',
-    ]),
-  ).toMatchInlineSnapshot(`
-    ".border-dashed {
-      --tw-border-style: dashed;
-      border-style: dashed;
-    }
-
-    .border-dotted {
-      --tw-border-style: dotted;
-      border-style: dotted;
-    }
-
-    .border-double {
-      --tw-border-style: double;
-      border-style: double;
-    }
-
-    .border-hidden {
-      --tw-border-style: hidden;
-      border-style: hidden;
-    }
-
-    .border-none {
-      --tw-border-style: none;
-      border-style: none;
-    }
-
-    .border-solid {
-      --tw-border-style: solid;
-      border-style: solid;
-    }"
-  `)
-  expect(
-    run([
-      '-border-solid',
-      '-border-dashed',
-      '-border-dotted',
-      '-border-double',
-      '-border-hidden',
-      '-border-none',
-    ]),
-  ).toEqual('')
-})
-
 // All border utilities are generated in the same way
 // so we can test them all at once with a loop
 const prefixes = [
@@ -7219,6 +7238,14 @@ for (let prefix of prefixes) {
   test(`${prefix}-*`, () => {
     let classes = []
 
+    // Style
+    classes.push(`${prefix}-solid`)
+    classes.push(`${prefix}-dashed`)
+    classes.push(`${prefix}-dotted`)
+    classes.push(`${prefix}-double`)
+    classes.push(`${prefix}-hidden`)
+    classes.push(`${prefix}-none`)
+
     // Width
     classes.push(prefix)
     classes.push(`${prefix}-0`)
@@ -7287,11 +7314,29 @@ test('border with custom default border width', () => {
     }
 
     .border {
-      border-style: var(--tw-border-style);
+      border-style: var(--tw-border-t-style) var(--tw-border-r-style) var(--tw-border-b-style) var(--tw-border-l-style);
       border-width: 2px;
     }
 
-    @property --tw-border-style {
+    @property --tw-border-t-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-r-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-b-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }
+
+    @property --tw-border-l-style {
       syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;

packages/tailwindcss/src/utilities.ts

@@ -2183,30 +2183,73 @@ export function createUtilities(theme: Theme) {
     }
   }
 
-  staticUtility('border-solid', [
-    ['--tw-border-style', 'solid'],
-    ['border-style', 'solid'],
-  ])
-  staticUtility('border-dashed', [
-    ['--tw-border-style', 'dashed'],
-    ['border-style', 'dashed'],
-  ])
-  staticUtility('border-dotted', [
-    ['--tw-border-style', 'dotted'],
-    ['border-style', 'dotted'],
-  ])
-  staticUtility('border-double', [
-    ['--tw-border-style', 'double'],
-    ['border-style', 'double'],
-  ])
-  staticUtility('border-hidden', [
-    ['--tw-border-style', 'hidden'],
-    ['border-style', 'hidden'],
-  ])
-  staticUtility('border-none', [
-    ['--tw-border-style', 'none'],
-    ['border-style', 'none'],
-  ])
+  for (let style of ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none']) {
+    staticUtility(`border-${style}`, [
+      ['--tw-border-t-style', style],
+      ['--tw-border-r-style', style],
+      ['--tw-border-b-style', style],
+      ['--tw-border-l-style', style],
+      ['border-style', style],
+    ])
+
+    staticUtility(`border-x-${style}`, [
+      ['--tw-border-r-style', style],
+      ['--tw-border-l-style', style],
+      ['border-right-style', style],
+      ['border-left-style', style],
+    ])
+
+    staticUtility(`border-y-${style}`, [
+      ['--tw-border-t-style', style],
+      ['--tw-border-b-style', style],
+      ['border-top-style', style],
+      ['border-bottom-style', style],
+    ])
+
+    staticUtility(`border-s-${style}`, [
+      () => rule('&', [
+        rule('&:dir(ltr)', [
+          decl('--tw-border-l-style', style)
+        ]),
+        rule('&:dir(rtl)', [
+          decl('--tw-border-r-style', style)
+        ])
+      ]),
+      ['border-inline-start-style', style],
+    ])
+
+    staticUtility(`border-e-${style}`, [
+      () => rule('&', [
+        rule('&:dir(ltr)', [
+          decl('--tw-border-r-style', style)
+        ]),
+        rule('&:dir(rtl)', [
+          decl('--tw-border-l-style', style)
+        ])
+      ]),
+      ['border-inline-end-style', style],
+    ])
+
+    staticUtility(`border-t-${style}`, [
+      ['--tw-border-t-style', style],
+      ['border-top-style', style],
+    ])
+
+    staticUtility(`border-r-${style}`, [
+      ['--tw-border-r-style', style],
+      ['border-right-style', style],
+    ])
+
+    staticUtility(`border-b-${style}`, [
+      ['--tw-border-b-style', style],
+      ['border-bottom-style', style],
+    ])
+
+    staticUtility(`border-l-${style}`, [
+      ['--tw-border-l-style', style],
+      ['border-left-style', style],
+    ])
+  }
 
   {
     // border-* (color)
@@ -2216,7 +2259,12 @@ export function createUtilities(theme: Theme) {
     }
 
     let borderProperties = () => {
-      return atRoot([property('--tw-border-style', 'solid', '<custom-ident>')])
+      return atRoot([
+        property('--tw-border-t-style', 'solid', '<custom-ident>'),
+        property('--tw-border-r-style', 'solid', '<custom-ident>'),
+        property('--tw-border-b-style', 'solid', '<custom-ident>'),
+        property('--tw-border-l-style', 'solid', '<custom-ident>'),
+      ])
     }
 
     function borderSideUtility(classRoot: string, desc: BorderDescription) {
@@ -2293,7 +2341,7 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border', {
       width: (value) => [
-        decl('border-style', 'var(--tw-border-style)'),
+        decl('border-style', 'var(--tw-border-t-style) var(--tw-border-r-style) var(--tw-border-b-style) var(--tw-border-l-style)'),
         decl('border-width', value),
       ],
       color: (value) => [decl('border-color', value)],
@@ -2301,8 +2349,8 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-x', {
       width: (value) => [
-        decl('border-left-style', 'var(--tw-border-style)'),
-        decl('border-right-style', 'var(--tw-border-style)'),
+        decl('border-left-style', 'var(--tw-border-l-style)'),
+        decl('border-right-style', 'var(--tw-border-r-style)'),
         decl('border-left-width', value),
         decl('border-right-width', value),
       ],
@@ -2311,8 +2359,8 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-y', {
       width: (value) => [
-        decl('border-top-style', 'var(--tw-border-style)'),
-        decl('border-bottom-style', 'var(--tw-border-style)'),
+        decl('border-top-style', 'var(--tw-border-t-style)'),
+        decl('border-bottom-style', 'var(--tw-border-b-style)'),
         decl('border-top-width', value),
         decl('border-bottom-width', value),
       ],
@@ -2321,7 +2369,7 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-s', {
       width: (value) => [
-        decl('border-inline-start-style', 'var(--tw-border-style)'),
+        decl('border-inline-start-style', 'var(--tw-border-l-style)'),
         decl('border-inline-start-width', value),
       ],
       color: (value) => [decl('border-inline-start-color', value)],
@@ -2329,7 +2377,7 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-e', {
       width: (value) => [
-        decl('border-inline-end-style', 'var(--tw-border-style)'),
+        decl('border-inline-end-style', 'var(--tw-border-r-style)'),
         decl('border-inline-end-width', value),
       ],
       color: (value) => [decl('border-inline-end-color', value)],
@@ -2337,7 +2385,7 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-t', {
       width: (value) => [
-        decl('border-top-style', 'var(--tw-border-style)'),
+        decl('border-top-style', 'var(--tw-border-t-style)'),
         decl('border-top-width', value),
       ],
       color: (value) => [decl('border-top-color', value)],
@@ -2345,7 +2393,7 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-r', {
       width: (value) => [
-        decl('border-right-style', 'var(--tw-border-style)'),
+        decl('border-right-style', 'var(--tw-border-r-style)'),
         decl('border-right-width', value),
       ],
       color: (value) => [decl('border-right-color', value)],
@@ -2353,7 +2401,7 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-b', {
       width: (value) => [
-        decl('border-bottom-style', 'var(--tw-border-style)'),
+        decl('border-bottom-style', 'var(--tw-border-b-style)'),
         decl('border-bottom-width', value),
       ],
       color: (value) => [decl('border-bottom-color', value)],
@@ -2361,7 +2409,7 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-l', {
       width: (value) => [
-        decl('border-left-style', 'var(--tw-border-style)'),
+        decl('border-left-style', 'var(--tw-border-l-style)'),
         decl('border-left-width', value),
       ],
       color: (value) => [decl('border-left-color', value)],