在 Gatsby 工程中配置 Tailwind CSS。
如果您还没有建立一个新的 Gatsby 项目，请先创建一个新的项目。最常见的方法是使用 Gatsby CLI：
gatsby new my-project
cd my-project安装 gatsby-plugin-postcss 和 Tailwind 以及其它依赖项:
npm install gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest接下来，生成您的 tailwind.config.js 和 postcss.config.js 文件：
npx tailwindcss init -p这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}阅读配置文档了解更多。
这也将会创建一个包含已配置好的 tailwindcss 和 autoprefixer 的 postcss.config.js 配置文件：
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}如果您计划使用其它的 PostCSS 插件，请阅读我们的将 PostCSS 作为您的 preprocessor 的文档。
在您的 tailwind.config.js 文件中，配置 purge 选项指定所有的 pages 和 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。
// tailwind.config.js
module.exports = {
- purge: [],
+ purge: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}请阅读我们单独的优化生产指南，以了解更多关于摇树优化未使用的样式来获得最佳性能的信息。
在您的 gatsby-config.js 文件中，启用 postcss 插件。
// gatsby-config.js
module.exports = {
/* Your site config here */
- plugins: [],
+ plugins: ['gatsby-plugin-postcss'],
}创建 ./src/styles/global.css 文件
并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。
/* ./src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。
阅读我们的文档添加基础样式，提取组件，和添加新的功能类，以获得用您自己的自定义 CSS 扩展 Tailwind 的最佳实践。
最后，如果在您的项目根目录不存在 ./gatsby-browser.js 文件，请创建一个，并导入您的 CSS 文件。
// ./gatsby-browser.js
+ import './src/styles/global.css';阅读关于使用全局样式的 Gatsby 文档，了解更多关于在 Gatsby 中使用全局 CSS 文件的信息。
您已经完成了所有步骤！现在，当您运行 gatsby develop, Tailwind CSS 就可以在您的 Gatsby 项目中使用了。