'Tailwind CSS class "w-full xl:w-3/6" doesn't work at xl breakpoint
I can't get this code to work on vuejs, class xl:w-3/6 doesn't override w-full.
I tried replacing w-full with sm:w-full but when the window is smaller than sm the class doesn't apply.
How can I get this to work properly?
Solution 1:[1]
Use
class="w-full xl:!w-3/6"
Here we apply the important modifier in tailwind CSS inorder to override the default behaviour of the class w-full
From the docs...
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |