gatsby - 将 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 Of 时的原因之一Uninstyled Content (FOUC)是因为字体的原因，如果没有在display: swap中设置它们，它们会阻塞可能会阻塞样式渲染直到它们完全加载。

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