feat: Add border-style on x, y, bottom, left, right and top

tailwindlabs · Mar 3, 2024 · cb0e7bf · cb0e7bf
1 parent 4429ab8
commit cb0e7bf
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add new `selector` and `variant` strategies for dark mode ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
+- Add `border-x-{style}`, `border-y-{style}`, `border-b-{style}`, `border-l-{style}`, `border-t-{style}` and `border-r-{style}` utilities ([#12652](https://github.com/tailwindlabs/tailwindcss/pull/12652))
 
 ### Changed
 

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -1650,6 +1650,48 @@ export let corePlugins = {
       '.border-double': { 'border-style': 'double' },
       '.border-hidden': { 'border-style': 'hidden' },
       '.border-none': { 'border-style': 'none' },
+
+      '.border-x-solid': { 'border-left-style': 'solid', 'border-right-style': 'solid' },
+      '.border-x-dashed': { 'border-left-style': 'dashed', 'border-right-style': 'dashed' },
+      '.border-x-dotted': { 'border-left-style': 'dotted', 'border-right-style': 'dotted' },
+      '.border-x-double': { 'border-left-style': 'double', 'border-right-style': 'double' },
+      '.border-x-hidden': { 'border-left-style': 'hidden', 'border-right-style': 'hidden' },
+      '.border-x-none': { 'border-left-style': 'none', 'border-right-style': 'none' },
+
+      '.border-y-solid': { 'border-top-style': 'solid', 'border-bottom-style': 'solid' },
+      '.border-y-dashed': { 'border-top-style': 'dashed', 'border-bottom-style': 'dashed' },
+      '.border-y-dotted': { 'border-top-style': 'dotted', 'border-bottom-style': 'dotted' },
+      '.border-y-double': { 'border-top-style': 'double', 'border-bottom-style': 'double' },
+      '.border-y-hidden': { 'border-top-style': 'hidden', 'border-bottom-style': 'hidden' },
+      '.border-y-none': { 'border-top-style': 'none', 'border-bottom-style': 'none' },
+
+      '.border-b-solid': { 'border-bottom-style': 'solid' },
+      '.border-b-dashed': { 'border-bottom-style': 'dashed' },
+      '.border-b-dotted': { 'border-bottom-style': 'dotted' },
+      '.border-b-double': { 'border-bottom-style': 'double' },
+      '.border-b-hidden': { 'border-bottom-style': 'hidden' },
+      '.border-b-none': { 'border-bottom-style': 'none' },
+
+      '.border-l-solid': { 'border-left-style': 'solid' },
+      '.border-l-dashed': { 'border-left-style': 'dashed' },
+      '.border-l-dotted': { 'border-left-style': 'dotted' },
+      '.border-l-double': { 'border-left-style': 'double' },
+      '.border-l-hidden': { 'border-left-style': 'hidden' },
+      '.border-l-none': { 'border-left-style': 'none' },
+
+      '.border-r-solid': { 'border-right-style': 'solid' },
+      '.border-r-dashed': { 'border-right-style': 'dashed' },
+      '.border-r-dotted': { 'border-right-style': 'dotted' },
+      '.border-r-double': { 'border-right-style': 'double' },
+      '.border-r-hidden': { 'border-right-style': 'hidden' },
+      '.border-r-none': { 'border-right-style': 'none' },
+
+      '.border-t-solid': { 'border-top-style': 'solid' },
+      '.border-t-dashed': { 'border-top-style': 'dashed' },
+      '.border-t-dotted': { 'border-top-style': 'dotted' },
+      '.border-t-double': { 'border-top-style': 'double' },
+      '.border-t-hidden': { 'border-top-style': 'hidden' },
+      '.border-t-none': { 'border-top-style': 'none' },
     })
   },