tailwindcss 不使用无前缀的实用程序
tailwindcss not using unprefixed utilities
我正在尝试将 div 的高度设置为 h-2，并且在介质上设置了带有高度动画的 class。
问题是 tailwindcss 在移动设备上仍然使用 h-20，而应该使用 h-2。
知道为什么吗？
这里是有问题的 div :
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav h-16' : 'md:animationBasisNav h-20'} dark:bg-gray-400`}></div>
The problem is that tailwindcss still uses the h-20 on mobile while h-2 should be used.
那是因为您使用的是 class h-20（在所有屏幕尺寸中应用 20 高度）而不是 md:h-20（在屏幕尺寸 [=12= 中应用 20 高度） ] 及以上）。
同样，您可能希望将 h-16 更改为 md:h-16。
您需要将 md: 前缀应用于所有 class 您希望仅在屏幕尺寸 md 及以上应用的元素。对于所有其他断点前缀也是如此。默认情况下，所有 classes 都是移动优先的（“默认”意味着没有断点前缀）。见 Responsive Design section on Tailwind CSS docs.
我的解决方案
嘿，也许你想试试这个：
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} dark:bg-gray-400`}></div>
现在您定义默认高度为 2，而在中型设备中为 20。
在您的所有 类 中使用此模式。
首先：定义手机高度
其次：添加类以获得更大的屏幕尺寸。
我正在尝试将 div 的高度设置为 h-2，并且在介质上设置了带有高度动画的 class。
问题是 tailwindcss 在移动设备上仍然使用 h-20，而应该使用 h-2。
知道为什么吗？
这里是有问题的 div :
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav h-16' : 'md:animationBasisNav h-20'} dark:bg-gray-400`}></div>
The problem is that tailwindcss still uses the h-20 on mobile while h-2 should be used.
那是因为您使用的是 class h-20（在所有屏幕尺寸中应用 20 高度）而不是 md:h-20（在屏幕尺寸 [=12= 中应用 20 高度） ] 及以上）。
同样，您可能希望将 h-16 更改为 md:h-16。
您需要将 md: 前缀应用于所有 class 您希望仅在屏幕尺寸 md 及以上应用的元素。对于所有其他断点前缀也是如此。默认情况下，所有 classes 都是移动优先的（“默认”意味着没有断点前缀）。见 Responsive Design section on Tailwind CSS docs.
我的解决方案
嘿，也许你想试试这个：
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} dark:bg-gray-400`}></div>
现在您定义默认高度为 2，而在中型设备中为 20。
在您的所有 类 中使用此模式。
首先：定义手机高度
其次：添加类以获得更大的屏幕尺寸。