Html class not working with custom Tailwind class

input.css: My custom css file

@tailwind base;
@tailwind components;
@tailwind utilities;

.event-button-secondary {
    height: 114px;
    max-width: 420px;
    @apply rounded-lg font-inter text-base-bold border-none bg-event-text-300 text-event-text-200 hover:bg-event-text-300 hover:text-event-text-200;
}

html page: The "w-32" I wrote in the html tag doesn't work.

<button class="event-button-secondary w-32">Deactive</button>

if you need to right external CSS with tailwind then you need to write code with @layer components and here is an example below.

@layer components{ .event-button-secondary { height: 114px; max-width: 420px; @apply rounded-lg font-inter text-base-bold border-none bg-event-text-300 text-event-text-200 hover:bg-event-text-300 hover:text-event-text-200; } }

I solve it. If you write !w-32 instead of w-32, it will work, but in Tailwind, we are asked to write such classes within @layer to prevent this situation. So if you write it like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
 .event-button-secondary {
 height: 114px;
 max-width: 420px;
 @apply rounded-lg font-inter text-base-bold border-none bg-event-text-300 text- 
 event-text-200 hover:bg-event-text-300 hover:text-event-text-200;
 }
}