css - tailwindcss 不使用无前缀实用程序

Question

我正在尝试将 div 的高度设置为 h-2 并在中设置一个具有高度动画的类。

问题是 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>

标签： cssreactjsnext.jstailwind-css

Answer 1

问题是 tailwindcss 仍然在移动设备上使用 h-20，而应该使用 h-2。

那是因为您正在使用该类h-20（在所有屏幕尺寸中md:h-20应用 20 高度）而不是（在屏幕尺寸md及以上应用中应用 20 高度）。

同样，您可能希望更改h-16为md:h-16.

您需要将md:前缀应用于您希望仅在屏幕尺寸md及以上应用的所有类。对于所有其他断点前缀也是如此。默认情况下，所有类都是移动优先的（并且“默认情况下”意味着没有断点前缀）。请参阅Tailwind CSS 文档的响应式设计部分。