Add support for border opacity

vadimdemedes · May 17, 2020 · cda704d · cda704d
1 parent 210951b
commit cda704d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/build.js b/build.js
@@ -83,7 +83,7 @@ const supportedUtilities = [
 	/^bg-(transparent|black|white|gray|red|orange|yellow|green|teal|blue|indigo|purple|pink)/,
 	// Background opacity
 	/^bg-opacity-/,
-	// Border color, style, width, radius
+	// Border color, style, width, radius, opacity
 	/^(border|rounded)/,
 	// Opacity
 	/^opacity-/,

diff --git a/readme.md b/readme.md
@@ -102,6 +102,7 @@ tailwind('pt-12 items-center');
 ### Borders
 
 - [Border Color](https://tailwindcss.com/docs/border-color)
+- [Border Opacity](https://tailwindcss.com/docs/border-opacity)
 - [Border Style](https://tailwindcss.com/docs/border-style) (all except `border-current`)
 - [Border Width](https://tailwindcss.com/docs/border-width)
 - [Border Radius](https://tailwindcss.com/docs/border-radius)

diff --git a/test.js b/test.js
@@ -20,10 +20,16 @@ test('ignore unknown classes', t => {
 
 test('support color opacity', t => {
 	t.deepEqual(
-		tailwind('text-blue-500 text-opacity-50 bg-blue-100 bg-opacity-50'),
+		tailwind(
+			'text-blue-500 text-opacity-50 bg-blue-100 bg-opacity-50 border-blue-100 border-opacity-50'
+		),
 		{
 			color: 'rgba(66, 153, 225, 0.5)',
-			backgroundColor: 'rgba(235, 248, 255, 0.5)'
+			backgroundColor: 'rgba(235, 248, 255, 0.5)',
+			borderTopColor: 'rgba(235, 248, 255, 0.5)',
+			borderRightColor: 'rgba(235, 248, 255, 0.5)',
+			borderBottomColor: 'rgba(235, 248, 255, 0.5)',
+			borderLeftColor: 'rgba(235, 248, 255, 0.5)'
 		}
 	);
 });