在 TailwindCSS 配置中使用 ES 模块（使用 React 和 Craco）

Question

我已经尝试了几个小时将包

d3-colors

导入到我的

tailwind.config.js

中。到目前为止，我在互联网上找到的解决方案都不起作用。

我已经尝试过：

• 将其转换为

  tailwind.config.mjs

  ，但随后它不会被加载。配置不起作用。

• 使用

  await import('colors-d3')

  但这也不起作用，因为那样我必须等待获取它的函数，而这也是不允许的：

module.exports = await config();
SyntaxError: await is only valid in async functions and the top level bodies of modules

• 我尝试将包更改为

  type='module'

  ，但是当我将其转换为ESM模块后，我遇到了各种各样的问题，Craco无法加载它的配置，因为craco本身就是commonjs。

• 我尝试修改Craco的配置...

• 我尝试使用 postcss 配置文件来传递

  tailwind.config.mjs

  作为配置文件参数，也不起作用。

等等等等

我无法让它工作。我怎样才能将此模块导入到我的 tailwind 配置中？

Answer 1

据团队称，他们不会很快支持 ESM。

https://github.com/tailwindlabs/tailwindcss/issues/8029#issuecomment-1086875656

Answer 2

tailwind.config.js中

现在支持

使用 ESM。不过配置文件还是需要调用

tailwind.config.js

，所以重命名为

tailwind.config.mjs

会导致加载不出来。

因此，解决方案是将

"type": "module"

添加到

package.json

，并确保所有其他依赖项都使用 ESM 模块。如果他们不这样做，您可以尝试打开一个 GitHub 问题，要求实施......