When there are two width values simultaneously, it is impossible to cover.

[maxfrees]

<div class="h-[100px] w-[50px]!  w-full! bg-amber-100"></div>

<div class="h-[100px] w-full!  w-[50px]!  bg-amber-100"></div>

Whether w-[50px] is placed before or after, it will not cover w-full.

[thecrypticace]

The order of classes inside the class attribute doesn't matter in HTML.

You shouldn't attempt to apply two utiliies like this and expect one to override the other. You should apply these conditionally — either by:

• Using variants with data attributes
• Using a tool like clsx
• Or manually toggling classes via el.classList.add / el.classList.remove

[khalidesskali]

In Tailwind, the order of classes in HTML does not determine which one wins. Both w-[50px]! and w-full! generate !important rules in CSS, so the one that appears later in the compiled CSS takes precedence.

To make w-[50px] apply, just remove w-full! or only use the utility you need. Relying on HTML class order won’t work with !important.