将 Tailwind 加载到 Gatsby 站点时延迟 300 毫秒

Posted 2023-03-06

【中文标题】将 Tailwind 加载到 Gatsby 站点时延迟 300 毫秒

【英文标题】：300ms delay loading Tailwind into Gatsby site

【发布时间】：2021-05-04 17:05:24

【问题描述】：

每当我点击刷新按钮时，样式都需要大约 300 毫秒才能生效。 我看不出我应该错过什么，因为我遵循了很多关于在 Gatsby 中设置顺风的指南。

// tailwind.config.js
module.exports = 
  purge: ["./src/**/*.js", "./src/**/*.jsx"],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
    fontFamily: 
      display: ["Source Sans Pro"],
      body: ["Source Sans Pro"],
    ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],
;

// postcss.config.js
module.exports = 
  plugins: 
    tailwindcss: ,
    autoprefixer: ,
  ,

// gatsby-config.js
...
plugins: ['gatsby-plugin-postcss'],

// gatsby-browser.js
import "./src/styles/global.css";

// src/styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

我错过了什么？

【参考方案1】：

你能试试这样的吗：

// tailwind.config.js
module.exports = 
  purge: ["./src/**/*.js", "./src/**/*.jsx"],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
    fontFamily: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: ['gatsby-plugin-postcss'],
;

在安装和配置gatsby-plugin-postcss 时，我还会尝试删除fontFamily 对象，至少仅出于测试目的，因为处理Flash O 时的原因之一f Uninstyled Content (FOUC) 是因为字体的原因，如果没有在display: swap 中设置，它们可能会阻塞样式渲染，直到它们已满载。

如果通过删除字体加gatsby-plugin-postcss 解决了问题，您可以尝试以不同的方式添加字体。

【讨论】：

感谢您的尝试！但遗憾的是没有效果:(

在gatsby build中也会发生这种情况吗？

现在已修复。我遇到了这个问题github.com/gatsbyjs/gatsby/issues/27644 running gatsby serve，这让我将 gatsby 更新到最新 - 这解决了问题:)

这就是我在想的原因。另一个解决方案是升级关键包。由于继承的配置，Tailwind 在开发和构建模式之间的行为不同。如果问题已解决，请考虑接受/投票以关闭问题的答案