如何在 Gatsby 中使用 TailwindCSS

TailwindCSS 是一个流行的 CSS 框架，它提供了大量的实用工具类，帮助你更快速地构建前端界面。在 Gatsby 中使用 TailwindCSS 可以更加方便地构建静态网站。本文将介绍如何在 Gatsby 项目中使用 TailwindCSS。

安装 TailwindCSS

首先，我们需要在 Gatsby 项目中安装 TailwindCSS。

使用 npm 安装：

npm install tailwindcss

使用 yarn 安装：

yarn add tailwindcss

安装完毕后，我们需要在项目根目录下创建一个 tailwind.config.js 文件，在该文件中配置 TailwindCSS。

// tailwind.config.js
module.exports = {
  // 配置文件内容
}

配置 TailwindCSS

在 tailwind.config.js 文件中，可以配置 TailwindCSS 的一些选项。

module.exports = {
  mode: "jit",    // 模式
  purge: [/* ... */],   // 移除无用的 CSS
  darkMode: false,      // 暗黑模式
  theme: { /* ... */ }, // 主题
  variants: { /* ... */ }, // 变量
  plugins: [/* ... */] // 插件
};

• mode: jit、aot 或者 watch。它们分别表示即时编译、预编译和监视模式。
• purge: 配置需要移除的未使用的 CSS 代码。
• darkMode: 配置暗黑模式，支持 class 和 media 两种方式。
• theme: 配置主题，包括颜色、字体、间距等属性。
• variants: 配置变量，用于生成特定的 CSS 样式。
• plugins: 配置插件，扩展 TailwindCSS 功能，例如添加新的工具类。

我们可以根据自己的需要，配置出符合自己项目的 TailwindCSS。

配置 Gatsby

安装好 TailwindCSS 并配置好后，我们需要在 Gatsby 中配置它。

在 gatsby-browser.js 和 gatsby-ssr.js 文件中，添加以下代码。

import "./src/styles/global.css"

在 src/styles/ 文件夹下，我们可以新建一个 global.css 文件。

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

以上代码将引入 TailwindCSS 的基本样式、组件样式和实用工具类。

在项目中使用 TailwindCSS

现在我们可以在项目中使用了。

例如，我们可以在 src/pages/index.js 文件中，添加一个按钮。

-- -------------------- ---- -------
------ ----- ---- -------

----- --------- - -- -- -
  ------ -
    ------- ------------------ ----------------- ---------- --------- ---- ---- ---------
      ----- --
    ---------
  -
-

------ ------- ---------

我们使用 class 属性来添加 TailwindCSS 工具类，对按钮进行样式修饰。

接下来，在终端中启动 Gatsby 项目，查看效果。

gatsby develop

我们可以看到，页面中有样式修饰的按钮。

总结

本文介绍了如何在 Gatsby 项目中使用 TailwindCSS，包括安装、配置和在项目中使用，希望能给需要的读者带来帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bd29048841e9894a1e3dd