如何在 Gatsby 主题中处理 tailwind.config.js

Question

我正在尝试通过 twin.macro 将 tailwindcss 包含到我的自定义 Gatsby 主题中。我正在使用纱线工作区，项目目录树设置如下：

./site - The actual site which contains the content
./packages/gatsby-theme-custom/** - The Gatsby theme

所以我的 site 拉入 gatsby-theme-custom 并用自己的内容填充它。

tailwindcss 本身的集成到目前为止运行良好。现在我正在尝试将 tailwind.config.js 文件添加到 gatsby-theme-custom 的根目录，但似乎该文件在编译期间没有被拾取。例如，我试图用一些自定义颜色扩展基本主题：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        electric: "#db00ff",
        ribbon: "#0047ff",
        wonderfulgray: "#eeeeee",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

然后在主题里面的某个文件中：

import tw from "twin.macro";

...


return (
 <div
      css={[
        tw`flex flex-col items-center justify-center h-screen`,
        tw`bg-gradient-to-b from-electric to-wonderfulgray`,
      ]}
    >
    Test
 </div>

)

当我现在编译网站时，我收到无法找到引用颜色的错误。

✕ from-electric was not found

当我将配置文件放入 site 的根目录时，一切正常。现在的问题是该站点基本上应该对样式一无所知。与样式相关的所有内容都应封装到主题中。有没有办法实现顺风从主题中获取配置文件呢？还是我一路上犯了一些错误？

感谢任何帮助！

Answer 1

我刚刚找到了答案。 twin.macro 可以指定 tailwindcss 配置文件的路径。

我在 gatsby-theme-custom 目录的根目录下添加了一个 babel-plugin-macros.config.js 文件。其次，我还在主题目录的根目录下添加了 tailwind.config.js。

babel-plugin-macros.config.js 文件的内容如下所示：

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    config: `${__dirname}/tailwind.config.js`,
    preset: "styled-components",
  },
};

${__dirname} 在这里很重要，以便选择 Gatsby-theme-custom 目录的根目录。

使用该配置，可以将 tailwind 配置文件放在主题目录中，并将其封装在 site 目录之外。

Answer 2

在 Gatsby 主题中处理 tailwind.config.js 的另一种方法是在 gatsby-plugin-postcss.[=14 的插件选项中要求自定义文件路径=]

在gatsby-config.js:

plugins: [
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require("postcss-import"),
          require("tailwindcss")({ config: `${__dirname}/tailwind.config.js` }),
          require("postcss-preset-env")({ stage: 1 }),
        ],
      },
    },

来源：Github comment tiggeymone

这种方法的好处是，您可以允许使用该主题的站点通过将 postCssPlugins 传递给通过主题选项设置主题。

如何在 Gatsby 主题中处理 tailwind.config.js

How to handle tailwind.config.js in a Gatsby Theme

gatsby

tailwind-css

gatsby-theme