是否可以按屏幕大小配置Tailwind自动更改？

编程问答 2022-08-23

问题描述

我知道，这个代码很好。

<p class="text-base lg:text-lg">FOOBAR</p>

但是这有点混乱。我只想写一堂课，

<p class="text-base">FOOBAR</p>

，并将tailwind.config.js配置为根据屏幕尺寸自动更改。如果text-base的大小为lg，则正常的大小可能为text-lg。

我可以配置上述选项吗？

解决方法

我认为这是不可能的。

但是您可以使用talwind的媒体查询和@apply来实现

.text-base {
   @apply text-sm;

   @screen lg {
     @apply text-lg;
   }
}

并像这样使用它

<p class="text-base">FOOBAR</p>

但是请注意，通过这种方式，您将添加更多样式，这种方法即使可读性较差，也会得到优化：

<p class="text-sm lg:text-lg">FOOBAR</p>
tailwind-css