Add Tailwind v4.2 logical border block utilities

Author: dcastil

src/lib/default-config.ts

@@ -1276,25 +1276,35 @@ export const getDefaultConfig = () => {
              */
             'border-w': [{ border: scaleBorderWidth() }],
             /**
-             * Border Width X
+             * Border Width Inline
              * @see https://tailwindcss.com/docs/border-width
              */
             'border-w-x': [{ 'border-x': scaleBorderWidth() }],
             /**
-             * Border Width Y
+             * Border Width Block
              * @see https://tailwindcss.com/docs/border-width
              */
             'border-w-y': [{ 'border-y': scaleBorderWidth() }],
             /**
-             * Border Width Start
+             * Border Width Inline Start
              * @see https://tailwindcss.com/docs/border-width
              */
             'border-w-s': [{ 'border-s': scaleBorderWidth() }],
             /**
-             * Border Width End
+             * Border Width Inline End
              * @see https://tailwindcss.com/docs/border-width
              */
             'border-w-e': [{ 'border-e': scaleBorderWidth() }],
+            /**
+             * Border Width Block Start
+             * @see https://tailwindcss.com/docs/border-width
+             */
+            'border-w-bs': [{ 'border-bs': scaleBorderWidth() }],
+            /**
+             * Border Width Block End
+             * @see https://tailwindcss.com/docs/border-width
+             */
+            'border-w-be': [{ 'border-be': scaleBorderWidth() }],
             /**
              * Border Width Top
              * @see https://tailwindcss.com/docs/border-width
@@ -1351,25 +1361,35 @@ export const getDefaultConfig = () => {
              */
             'border-color': [{ border: scaleColor() }],
             /**
-             * Border Color X
+             * Border Color Inline
              * @see https://tailwindcss.com/docs/border-color
              */
             'border-color-x': [{ 'border-x': scaleColor() }],
             /**
-             * Border Color Y
+             * Border Color Block
              * @see https://tailwindcss.com/docs/border-color
              */
             'border-color-y': [{ 'border-y': scaleColor() }],
             /**
-             * Border Color S
+             * Border Color Inline Start
              * @see https://tailwindcss.com/docs/border-color
              */
             'border-color-s': [{ 'border-s': scaleColor() }],
             /**
-             * Border Color E
+             * Border Color Inline End
              * @see https://tailwindcss.com/docs/border-color
              */
             'border-color-e': [{ 'border-e': scaleColor() }],
+            /**
+             * Border Color Block Start
+             * @see https://tailwindcss.com/docs/border-color
+             */
+            'border-color-bs': [{ 'border-bs': scaleColor() }],
+            /**
+             * Border Color Block End
+             * @see https://tailwindcss.com/docs/border-color
+             */
+            'border-color-be': [{ 'border-be': scaleColor() }],
             /**
              * Border Color Top
              * @see https://tailwindcss.com/docs/border-color
@@ -2378,6 +2398,8 @@ export const getDefaultConfig = () => {
                 'border-w-y',
                 'border-w-s',
                 'border-w-e',
+                'border-w-bs',
+                'border-w-be',
                 'border-w-t',
                 'border-w-r',
                 'border-w-b',
@@ -2390,6 +2412,8 @@ export const getDefaultConfig = () => {
                 'border-color-y',
                 'border-color-s',
                 'border-color-e',
+                'border-color-bs',
+                'border-color-be',
                 'border-color-t',
                 'border-color-r',
                 'border-color-b',

src/lib/types.ts

@@ -239,6 +239,8 @@ export type DefaultClassGroupIds =
     | 'blur'
     | 'border-collapse'
     | 'border-color-b'
+    | 'border-color-be'
+    | 'border-color-bs'
     | 'border-color-e'
     | 'border-color-l'
     | 'border-color-r'
@@ -252,6 +254,8 @@ export type DefaultClassGroupIds =
     | 'border-spacing'
     | 'border-style'
     | 'border-w-b'
+    | 'border-w-be'
+    | 'border-w-bs'
     | 'border-w-e'
     | 'border-w-l'
     | 'border-w-r'

tests/class-map.test.ts

@@ -55,6 +55,8 @@ test('class map has correct class groups at first part', () => {
             'border-collapse',
             'border-color',
             'border-color-b',
+            'border-color-be',
+            'border-color-bs',
             'border-color-e',
             'border-color-l',
             'border-color-r',
@@ -68,6 +70,8 @@ test('class map has correct class groups at first part', () => {
             'border-style',
             'border-w',
             'border-w-b',
+            'border-w-be',
+            'border-w-bs',
             'border-w-e',
             'border-w-l',
             'border-w-r',

tests/tailwind-css-versions.test.ts

@@ -228,4 +228,26 @@ test('supports Tailwind CSS v4.2 features', () => {
 
     expect(twMerge('scroll-py-1 scroll-pbs-2 scroll-pbe-3')).toBe('scroll-py-1 scroll-pbs-2 scroll-pbe-3')
     expect(twMerge('scroll-my-1 scroll-mbs-2 scroll-mbe-3')).toBe('scroll-my-1 scroll-mbs-2 scroll-mbe-3')
+
+    // Logical border block utilities
+
+    expect(twMerge('border-bs-1 border-bs-2')).toBe('border-bs-2')
+    expect(twMerge('border-be-1 border-be-2')).toBe('border-be-2')
+    expect(twMerge('border-bs-red border-bs-blue')).toBe('border-bs-blue')
+    expect(twMerge('border-be-red border-be-blue')).toBe('border-be-blue')
+
+    expect(twMerge('border-2 border-bs-4 border-be-6')).toBe('border-2 border-bs-4 border-be-6')
+    expect(twMerge('border-bs-4 border-be-6 border-2')).toBe('border-2')
+    expect(twMerge('border-red border-bs-blue border-be-green')).toBe(
+        'border-red border-bs-blue border-be-green',
+    )
+    expect(twMerge('border-bs-blue border-be-green border-red')).toBe('border-red')
+
+    expect(twMerge('border-y-2 border-bs-4 border-be-6')).toBe('border-y-2 border-bs-4 border-be-6')
+    expect(twMerge('border-t-2 border-bs-4 border-b-6 border-be-8')).toBe(
+        'border-t-2 border-bs-4 border-b-6 border-be-8',
+    )
+    expect(twMerge('border-y-red border-bs-blue border-be-green')).toBe(
+        'border-y-red border-bs-blue border-be-green',
+    )
 })