Missing justify content "normal"

[DavydeVries]

Hi,

Currently, I'm using for viewport sm the class sm:justify-center. But I like to make the element full width on viewport md. The default value of justify-content is normally justify-content: normal (maybe differs on other browsers?). But there is no way to "reset" back to normal value.

Do you have suggestions to solve my issue, or is this value missing from the core?

Example:
Element not full width: https://play.tailwindcss.com/pj23KKG5cV
What I like to achieve/Expected behaviour: https://play.tailwindcss.com/oQ38fSUAsn

Kind regards,
Davy

PS. I already tried to add normal to my config as an "extend" but didn't get it to work.

[wongjn]

Several solutions:

Use an arbitrary property class to apply justify-content: normal

-<div class="md:justify-normal flex gap-4 divide-dashed divide-brown-400 overflow-y-auto whitespace-nowrap p-4 text-center text-sm text-white sm:justify-center md:grid md:gap-0 md:divide-y md:whitespace-normal md:p-0 md:text-left md:text-lg">
+<div class="md:[justify-content:normal] flex gap-4 divide-dashed divide-brown-400 overflow-y-auto whitespace-nowrap p-4 text-center text-sm text-white sm:justify-center md:grid md:gap-0 md:divide-y md:whitespace-normal md:p-0 md:text-left md:text-lg">

Use a max-* screen variant to apply justify-content: center for sm screen and lower

-<div class="md:justify-normal flex gap-4 divide-dashed divide-brown-400 overflow-y-auto whitespace-nowrap p-4 text-center text-sm text-white sm:justify-center md:grid md:gap-0 md:divide-y md:whitespace-normal md:p-0 md:text-left md:text-lg">
+<div class="flex gap-4 divide-dashed divide-brown-400 overflow-y-auto whitespace-nowrap p-4 text-center text-sm text-white max-sm:justify-center md:grid md:gap-0 md:divide-y md:whitespace-normal md:p-0 md:text-left md:text-lg">

Use a Tailwind plugin to add a rule for justify-content: normal

   },
-  plugins: [],
+  plugins: [
+    require('tailwindcss/plugin')(({ addUtilities }) => {
+      addUtilities({
+        '.justify-normal': {
+          justifyContent: 'normal',
+        },
+      });
+    }),
+  ],
 }

Use CSS to add a rule for justify-content: normal

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .justify-normal {
+    justify-content: normal;
+  }
+}

[DavydeVries]

Thank you so much, I went for the last option aka:

@layer utilities {
  .justify-normal {
    justify-content: normal;
  }
}

But I'm still convienced that this value should be in the core.