自定义Tailwind CSS类与w-32冲突：HTML中w-32样式不生效问题

问题场景 #

自定义CSS文件input.css中定义了Tailwind组件类.event-button-secondary，在HTML的<button>标签中同时添加该类与Tailwind内置类w-32时，w-32的宽度样式无法生效。

相关代码 #

input.css：

@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：

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

问题原因 #

你的自定义组件类写在了@tailwind utilities之后，导致Tailwind工具类（比如w-32）的优先级低于自定义类。虽然自定义类里没有直接设置width属性，但CSS层叠顺序中后定义的类会干扰同优先级样式的覆盖逻辑，使得w-32的宽度设置无法生效。

解决方法 #

方法1：调整自定义类的位置（推荐） #

将自定义组件类移动到@tailwind components和@tailwind utilities之间，让Tailwind工具类在后面加载，确保其优先级更高：

@tailwind base;
@tailwind components;

/* 自定义组件类放在components之后，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;
}

@tailwind utilities;

方法2：使用!important变体（应急方案） #

如果暂时无法调整CSS顺序，可以给w-32添加Tailwind的!变体，强制提升样式优先级：

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

方法3：显式声明默认宽度 #

在自定义类中添加width:auto，明确允许工具类覆盖默认宽度设置：

.event-button-secondary {
    height: 114px;
    max-width: 420px;
    width: auto; /* 显式设置默认宽度，让工具类可覆盖 */
    @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;
}

内容的提问来源于stack exchange，提问作者Erdem Sandıkçı