Tailwind CSS class "w-full xl:w-3/6" 在 xl 断点处不起作用

Tailwind CSS class "w-full xl:w-3/6" doesn't work at xl breakpoint

我无法让此代码在 vuejs 上运行,class xl:w-3/6 不会覆盖 w-full.

我尝试用 sm:w-full 替换 w-full 但是当 window 小于 sm 时 class 不适用。

我怎样才能让它正常工作?

使用

class="w-full xl:!w-3/6"

这里我们在 tailwind CSS 中应用 important modifier 以覆盖 class w-full

的默认行为

来自文档...

The ! always goes at the beginning of the utility name, after any variants, but before any prefix:

<div class="sm:hover:!tw-font-bold">

This can be useful in rare situations where you need to increase specificity because you’re at war with some styles you don’t control.