v4: mx-auto not behaving like in v3

[Jumaron]

What version of Tailwind CSS are you using?

v4

What build tool (or framework if it abstracts the build tool) are you using?

Svelte 5 next 73, Sveltekit 2

What version of Node.js are you using?

v20.10.0

What browser are you using?

Microsoft Edge + Firefox

What operating system are you using?

Windows

Describe your issue

mx-auto in v3 had a more box sized approach while in v4 it does fullwidth (not even sure if its working).
Just wanted to know if thats a known issue.
Other than that v4 is a Banger GJ guys!

[wongjn]

mx-auto in v4 still produces the same CSS as v3 for me:

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

Could you confirm whether this is the case for you? If so, it could indicate a some other unexpected CSS behavior and for that, a minimal reproducible example could help please!

[mansonlu]

for me it is not, i use tailwind version 4.1.10，
it generate:
.mx-auto {
margin-inline: auto;
}

i cant center a block now, for text "A comprehensive comparison guide to help you choose the right battery technology for your needs":

The code:

<section class="bg-gradient-to-br from-blue-600 to-teal-600 text-white py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h1 class="text-4xl md:text-6xl font-bold !mb-6 leading-tight">
LiPo Battery vs NiMH Battery
</h1> <p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto leading-relaxed">
A comprehensive comparison guide to help you choose the right battery technology for your needs
</p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <a href="#comparison" class="bg-white !text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-200">
View Comparison
</a> <a href="#applications" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:!text-blue-600 transition-colors duration-200">
See Applications
</a> </div> </div> </div> </section>

[ninohx96]

i encountered the same "mx-auto class not working" condition like yours, may you can check whether your global.css file exists some reset-css code like * {margin: 0} but its not in special tailwindcss layer, and it is absolutely my own condition , i delete it, then the problem gone.

[mansonlu]

i encountered the same "mx-auto class not working" condition like yours, may you can check whether your global.css file exists some reset-css code like * {margin: 0} but its not in special tailwindcss layer, and it is absolutely my own condition , i delete it, then the problem gone.

no, in my global.css， there is only below code, I use astro with tailwindcss version ^4.1.10
@import "tailwindcss";

[Jumaron]

V3

V4

And this goes for all cases where i use mx-auto.
Below is the div that is used for the examples from above, hope you do not mind the censoring ^^

I checked and mx-auto does currently nothing with the margin and just leaves it at 0
The class mx-auto is included in the HTML of the Website when loading the Website.

[wongjn]

Interesting! Consider providing a minimal reproducible example for us to troubleshoot please.

[adamwathan]

Problem here is that there is no container class in v4 at the moment, not the mx-auto class. There's another open issue for it so we'll sort out a solution soon I'm sure!

[Jumaron]

Your right that was it, I'am blind o.o
Thx for your help/support though v4 is so good!