Tailwind CSS 样式不适用

Question

错误发生在哪里？ 这是我的终点： 主题： { 屏幕：{ '移动-sm': '320px', '移动MD'：'481px'， '平板电脑': '769px', '桌面-sm': '1025px', '桌面-md': '1201px' },

我需要在移动视图中应用样式为 flex-col ，在桌面视图中应用样式

Answer 1

当您对元素进行内联样式时，请尝试这样的操作

<div className="flex-col md:flex-row">
Content
</div>

sm

md

和

lg

将为每个断点使用

@media

查询，默认情况下 - 我相信 - 设置为 640p、768px 和 1024px。

首先设置较小视图的样式是常见的做法，因为它们往往需要更微调的样式。请记住，您可以覆盖这样的样式：

<div className="text-lg md:text-2lx">
This text is large on mobile but 2XL on desktop
</div>