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

Question

每当我点击刷新按钮时，样式都需要大约 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;

我错过了什么？

Answer 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 解决了问题，您可以尝试以不同的方式添加字体。