Padding is just a specific example. The focus is on setting a default configuration and then overriding it with TailwindCSS.

By default, I reset the padding of all elements to 0. After that, I expect that just like in v3, in v4 as well, TailwindCSS's px and py (and other padding) classes will override this setting.

Expected behavior: rectangle, as px-{number} is greater than py-{number}; Result: square, as neither px nor py is valid.

* {
  padding: 0;
}

<script src="/@tailwindcss/browser@4"></script>

TailwindCSS v4 - Expected: rectangle (not working in v4)
<div class="bg-red-200 w-32 h-32 px-32 py-16"></div>

Padding is just a specific example. The focus is on setting a default configuration and then overriding it with TailwindCSS.

By default, I reset the padding of all elements to 0. After that, I expect that just like in v3, in v4 as well, TailwindCSS's px and py (and other padding) classes will override this setting.

Expected behavior: rectangle, as px-{number} is greater than py-{number}; Result: square, as neither px nor py is valid.

* {
  padding: 0;
}

<script src="https://unpkg/@tailwindcss/browser@4"></script>

TailwindCSS v4 - Expected: rectangle (not working in v4)
<div class="bg-red-200 w-32 h-32 px-32 py-16"></div>

However it still worked in TailwindCSS v3.

* {
  padding: 0;
}

<script src="https://cdn.tailwindcss"></script>

TailwindCSS v3 - Expected: rectangle (working in v3)
<div class="bg-red-200 w-32 h-32 px-32 py-16"></div>

Note: The question was inspired by wongjn's GitHub comment.

• tailwind-css
• tailwind-css-4

1 Answer 1

Since TailwindCSS classes are in CSS-native cascade layers from v4, the previously used padding-reset method becomes "deprecated" because TailwindCSS classes will create a lower rule. Instead, we should also place our custom overriding class in CSS-native cascade layers, like this:

@layer base {
  * {
    padding: 0;
  }
}

<script src="https://unpkg/@tailwindcss/browser@4"></script>

TailwindCSS v4 - Expected: rectangle (working in v4)
<div class="bg-red-200 w-32 h-32 px-32 py-16"></div>

• Cascade layers - MDN Docs
• Creating cascade layers - MDN Docs
• @layer CSS at-rule - MDN Docs

Native cascade layers - giving us more control than ever over how different style rules interact with each other.

• Designed for the modern web - TailwindCSS v4 Blog