Tailwind CSS home page
  1. Installation
  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@3 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>
  )
}