小编git*_*ger的帖子

我正在尝试在我的 scss 文件中使用 @font-face 声明。

正在应用正确的 CSS 规则，因此 font-face 声明看起来没问题。路径也已解决，所以这不是问题。而且，webpack 不会抛出任何错误，因此它似乎不是任何类型的加载器问题。但最终，浏览器仍然没有渲染该字体。（见图）

从 Webpack 5 开始，文档指出您可以在规则中声明“type: 'asset/resource'”以正确加载字体或图像等资源。它适用于我加载的图像，但不适用于字体。

CSS：

@font-face {
    font-family: 'Yusei Magic', sans-serif;
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')
        format('truetype');
}

网页包配置：

module: {
...
        rules: [
            ...
            {
                test: /\.ttf$/,
                type: 'asset/resource',
            },
        ],
    },

有时，但并非总是，当我使用 Tailwind CSS（在带有 webpack 的 React 项目中）时，我尝试应用这样的类：

<p className="text-2xl sm:text-3xl">Some text</p>

预期行为：根据 Tailwind 的移动优先设计，我的文本在超小/移动屏幕上的尺寸将为“2xl”，然后在最小宽度为 640px 时，其尺寸将为“3xl”

实际结果：在 CSS 中读取 640px 媒体查询断点处的“3xl”规则，但它在 Chrome 开发工具中被划掉，而“2xl”大小则覆盖它。这也许表明 2xl 规则在级联中具有更大的特异性，这与 Tailwind 的预期行为相反。

--直接引用Tailwind的文档：

//Use unprefixed utilities to target mobile, and override them at larger breakpoints
<div class="text-center sm:text-left"></div>

看看我上面的规则的结果......

我很难理解为什么它可能不应用这种风格，因为我完全按照我应该的方式使用 Tailwind。

正确的？