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

Posted 2023-03-06

【中文标题】如何在 Gatsby 主题中处理 tailwind.config.js

【英文标题】：How to handle tailwind.config.js in a Gatsby Theme

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

感谢任何帮助！

【参考方案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>