1

我正在尝试tailwindcss通过twin.macro. 我正在使用纱线工作区，项目目录树设置如下：

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

任何帮助表示赞赏！

4

2 回答 2

1

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

我babel-plugin-macros.config.js在目录的根gatsby-theme-custom目录添加了一个文件。其次，我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目录的地方。

于 2021-01-06T19:50:35.747 回答
0

在 Gatsby 主题中处理tailwind.config.jsgatsby-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 }),
        ],
      },
    },

资料来源： tiggeymone的Github 评论

这种方法的方便之处在于，您可以通过主题选项传递给主题，从而允许使用主题的站点选择性地提供自己的tailwind.config.js文件。postCssPlugins

于 2021-09-11T20:47:40.847 回答