Repository: tailwindlabs/tailwindcss

Problem statement:
[Feature Proposal] justify-content: space-evenly
Hey all,

this is a feature request (and PR) to add a utility for `justify-content: space evenly`, named `justify-evenly`.

MDN describes the functionality as:

> The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

Support for that value is present in all major browser except Edge and IE ([source](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Support_in_Flex_layout)).


Hints:

Patch:
diff --git a/src/plugins/justifyContent.js b/src/plugins/justifyContent.js
--- a/src/plugins/justifyContent.js
+++ b/src/plugins/justifyContent.js
@@ -17,6 +17,9 @@ export default function() {
         '.justify-around': {
           'justify-content': 'space-around',
         },
+        '.justify-evenly': {
+          'justify-content': 'space-evenly',
+        },
       },
       variants('justifyContent')
     )


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -3456,6 +3456,10 @@ video {
   justify-content: space-around !important;
 }
 
+.justify-evenly {
+  justify-content: space-evenly !important;
+}
+
 .content-center {
   align-content: center !important;
 }
@@ -11191,6 +11195,10 @@ video {
     justify-content: space-around !important;
   }
 
+  .sm\:justify-evenly {
+    justify-content: space-evenly !important;
+  }
+
   .sm\:content-center {
     align-content: center !important;
   }
@@ -18927,6 +18935,10 @@ video {
     justify-content: space-around !important;
   }
 
+  .md\:justify-evenly {
+    justify-content: space-evenly !important;
+  }
+
   .md\:content-center {
     align-content: center !important;
   }
@@ -26663,6 +26675,10 @@ video {
     justify-content: space-around !important;
   }
 
+  .lg\:justify-evenly {
+    justify-content: space-evenly !important;
+  }
+
   .lg\:content-center {
     align-content: center !important;
   }
@@ -34399,6 +34415,10 @@ video {
     justify-content: space-around !important;
   }
 
+  .xl\:justify-evenly {
+    justify-content: space-evenly !important;
+  }
+
   .xl\:content-center {
     align-content: center !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3456,6 +3456,10 @@ video {
   justify-content: space-around;
 }
 
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
 .content-center {
   align-content: center;
 }
@@ -11191,6 +11195,10 @@ video {
     justify-content: space-around;
   }
 
+  .sm\:justify-evenly {
+    justify-content: space-evenly;
+  }
+
   .sm\:content-center {
     align-content: center;
   }
@@ -18927,6 +18935,10 @@ video {
     justify-content: space-around;
   }
 
+  .md\:justify-evenly {
+    justify-content: space-evenly;
+  }
+
   .md\:content-center {
     align-content: center;
   }
@@ -26663,6 +26675,10 @@ video {
     justify-content: space-around;
   }
 
+  .lg\:justify-evenly {
+    justify-content: space-evenly;
+  }
+
   .lg\:content-center {
     align-content: center;
   }
@@ -34399,6 +34415,10 @@ video {
     justify-content: space-around;
   }
 
+  .xl\:justify-evenly {
+    justify-content: space-evenly;
+  }
+
   .xl\:content-center {
     align-content: center;
   }