300ms延迟加载Tailwind到Gatsby站点

Question

每当我点击刷新按钮时，样式化工作大约需要300ms。我不知道我应该错过什么，因为我已经遵循了很多指南，关于在《盖茨比》中设置顺风。

// 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对象，至少只是为了测试目的，因为处理F的原因之一是睫毛OfUC>内容(FOUC)是因为字体，如果它们没有在display: swap中设置，它们可能会阻塞样式渲染，直到它们完全加载。

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