未应用顺风响应样式

Posted 2023-03-07

【中文标题】未应用顺风响应样式

【英文标题】：Tailwind responsive styles not being applied

【发布时间】：2020-04-30 17:39:24

【问题描述】：

我有一个 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 没有被应用。

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

【问题讨论】：

你是否在 gatsby-browser.js 中包含 global.css？

【参考方案1】：

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

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