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

【问题标题】：How to handle tailwind.config.js in a Gatsby Theme如何在 Gatsby 主题中处理 tailwind.config.js
【发布时间】：2021-04-12 14:00:26
【问题描述】：

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

./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 的根目录时，一切正常。现在的问题是该站点基本上不应该对样式一无所知。与样式相关的所有内容都应封装到主题中。有没有办法实现顺风从主题中获取配置文件？还是我在此过程中犯了一些错误？

感谢任何帮助！

【问题讨论】：

标签： gatsby tailwind-css gatsby-theme

【解决方案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 目录的地方。

【讨论】：

【解决方案2】：

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

在 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 传递给主题，从而允许使用主题的网站选择性地提供自己的tailwind.config.js 文件。 p>

【讨论】：