使用 Gatsby 安装 Tailwind CSS

在 Gatsby 项目中设置 Tailwind CSS。

创建项目

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

Terminal

gatsby new my-project
cd 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 文件，并添加 @import 以导入 Tailwind CSS。

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

index.js

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