问题描述
我知道,这个代码很好。
<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>