Tailwind CSS 主页
  1. 安装
  2. 使用 Gatsby 安装 Tailwind CSS

  1. 创建您的项目

    如果您还没有设置，请先创建一个新的 Gatsby 项目。最常见的方法是使用 Gatsby CLI。

    终端
    gatsby new my-projectcd my-project

  2. 安装 Tailwind CSS

    使用 npm 安装 tailwindcss 及其对等依赖项，以及 gatsby-plugin-postcss，然后运行 init 命令生成 tailwind.config.js 和 postcss.config.js。

    终端
    npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcssnpx tailwindcss init -p

  3. 启用 Gatsby PostCSS 插件

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

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

  4. 配置您的模板路径

    在您的 tailwind.config.js 文件中添加所有模板文件路径。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  5. 将 Tailwind 指令添加到您的 CSS

    创建一个 ./src/styles/global.css 文件，并为 Tailwind 的每一层添加 @tailwind 指令。

    global.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. 导入 CSS 文件

    如果您的项目根目录中不存在 gatsby-browser.js 文件，请创建一个，并导入您新创建的 ./src/styles/global.css 文件。

    gatsby-browser.js
    import './src/styles/global.css'

  7. 开始您的构建过程

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

    终端
    gatsby develop

  8. 开始在您的项目中使用 Tailwind

    开始使用 Tailwind 的实用程序类来设置您的内容样式。

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