基于 @media 查询，通过更新根字体大小（即 rem）实现响应式 Tailwind css？

Question

我一直在我的 Vue 项目中使用 tailwind，总体来说它非常好，但是总是sm:w-10 lg:w-10 2xl:w-30为我的所有课程编写（等等）有点烦人。

lg xl 2xl所以我在想，由于宽度是基于 rem 的，那么在断点处更新根字体大小（决定 rem 值）而不是在每个标签上重置它们不是更有意义吗？

我想我可以通过根组件上的类似方法来实现这一点：

html { // changed from body to html
    font-size: 16px;


@media screen and (max-width: 1024px) {
  html { 
    font-size: 24px;
  }
}

但我对这样做持怀疑态度，因为 Tailwind 文档根本没有提到它。谁能告诉我这是否/为什么是一个坏主意？

Answer 1

只需将其添加到父类中，然后下面的所有内容都将应用相同的文本修饰符。

例如，随着所有子 div 的屏幕宽度增加，下面的文本大小也会增加

<div class='text-base md:text-lg lg:text-lg xl:text-xl'
  ... All text content inside here will responsively change size
</div>

请参阅下面的链接了解更多信息

字体大小

响应式设计