在 Tailwind CSS 配置中从 npm 导入令牌

Question

我正在查看 Tailwind CSS 中的主题配置。 它看起来真的很强大，但是我在配置中使用我的设计令牌时遇到了麻烦。

我通过 npm 分发了我的令牌，但不知道如何将它们包含在我的tailwind.config.js中。 有没有办法像这样包含它们？ 我应该使用不同的方法吗？

// What I'm trying to achieve
import DesignTokens from "@my-design-system/tokens";

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    colors: {
      blue: DesignTokens.COLOR_BLUE_700,
    },
  },
  plugins: [],
};

我得到的错误

SyntaxError: Cannot use import statement outside a module

任何信息将不胜感激。

谢谢

Answer 1

如评论中所述，使用import是混合模块格式。

我让它使用以下配置。

// I have tokens available in many different formats thanks to Style Dictionary. Here we use JSON.
const DesignTokens = require("@my-design-system/tokens.json");

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    colors: {
      blue: {
        700: DesignTokens["color-blue-700"],
      },
    },
  },
  plugins: [],
};