Search code examples
tailwind-csstailwind-css-4

From v4 the reset style cannot be overridden by TailwindCSS classes

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.com/@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.com"></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.

Solution

  • 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.com/@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>

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