未应用顺风响应样式

Question

我有一个 gatsby 网站，它使用 tailwind 作为 npm 依赖项。在global.css 中，我导入了@tailwind 指令。

/* @tailwind preflight; */
@tailwind components;
@tailwind utilities;
/* @tailwind tailwind; */
@tailwind screens;

这个 css 文件被导入 index.js（反应组件）。但是，我有像 <section className="min-w-full mb-10 flex lg:justify-end sm:justify-center"> 这样的类名，但 sm 没有被应用。

知道我的设置是否不正确吗？

Answer 1

要定位真正的小型设备，您只需键入 justify-center，因为 Tailwind 是移动优先的。 sm- 前缀针对大于 640 像素的设备。

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }