我可以根据屏幕尺寸配置 Tailwind 自动更改吗？

【问题标题】：Can I configure Tailwind auto change by screen size?我可以根据屏幕尺寸配置 Tailwind 自动更改吗？
【发布时间】：2020-12-01 09:00:14
【问题描述】：

当然我知道，这段代码很好。

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

但这有点乱。我只想写一节课，

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

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

我可以配置以上选项吗？

【问题讨论】：

【解决方案1】：

我不认为这是可能的..

但你可以使用 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>

【讨论】：