在 Gatsby 中安装 Tailwind CSS

在 Gatsby 项目中设置 Tailwind CSS。

创建你的项目

如果你还没有创建 Gatsby 项目，可以先新建一个。最常见的方法是使用Gatsby CLI。

Terminal

gatsby new my-projectcd my-project

安装 Tailwind CSS

使用 npm 安装 @tailwindcss/postcss、它的同伴依赖，以及 gatsby-plugin-postcss。

Terminal

npm install @tailwindcss/postcss tailwindcss postcss gatsby-plugin-postcss

启用 Gatsby PostCSS 插件

在你的 gatsby-config.js 文件中，启用 gatsby-plugin-postcss。更多信息请参阅该插件的文档。

gatsby-config.js

module.exports = {  plugins: [    'gatsby-plugin-postcss',    // ...  ],}

配置 PostCSS 插件

在项目根目录下创建一个 postcss.config.js 文件，并将 @tailwindcss/postcss 插件添加到你的 PostCSS 配置中。

postcss.config.js

module.exports = {  plugins: {    "@tailwindcss/postcss": {},  },};

导入 Tailwind CSS

创建一个 ./src/styles/global.css 文件，并添加一个用于 Tailwind CSS 的 @import。

global.css

@import "tailwindcss";

导入 CSS 文件

如果你的项目根目录中还没有 gatsby-browser.js 文件，请创建一个，并导入你新创建的 ./src/styles/global.css 文件。

gatsby-browser.js

import './src/styles/global.css';

开始构建流程

使用 gatsby develop 运行你的构建过程。

Terminal

gatsby develop

开始在你的项目中使用 Tailwind

开始使用 Tailwind 的工具类来为你的内容添加样式。

index.js

export default function IndexPage() {  return (    <Layout>      <h1 className="text-3xl font-bold underline">        Hello world!      </h1>    </Layout>  )}