顺风CSS正在覆盖我的响应填充。

Question

我试图在组件中添加响应性填充。因为Tailwind是移动的-首先，我将我的移动填充定义到p-3和屏幕的"md“中，更大的宽度应该使用p-5。但是，如您所见，p-3类正在重写md:p-5类。我怎么才能解决这个问题？

<div className="flex-column flex rounded-3xl bg-slate-100 p-3 md:p-5">

开发工具映像：

​

Answer 1

代码似乎没什么问题。它工作正常，你可以检查下面。

​

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex-column flex rounded-3xl bg-slate-100 p-3 md:p-5"></div>

​

使用多个屏幕大小检查

。

您可以检查正在查看的铬开发工具日志的屏幕大小。

当屏幕宽度来自md时，768 px to 1023px断点就会生效。所以看看这个。

如果您需要更小/更窄的屏幕宽度，那么您也可以使用sm断点，当屏幕宽度来自640 px to 767px时也可以使用该断点。