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

【问题标题】：Importing tokens from npm in Tailwind CSS config在 Tailwind CSS 配置中从 npm 导入令牌
【发布时间】：2022-01-17 22:54:43
【问题描述】：

我正在查看 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

任何信息将不胜感激。

谢谢

【问题讨论】：

如果您的库支持 commonjs，则使用 require 获取令牌。当您使用import 和module.exports 时，您正在混合模块格式。您的节点运行时需要 commonjs。
这是正确的。使用require 我能够让它工作。谢谢。

标签： javascript css tailwind-css

【解决方案1】：

如 cmets 中所述，使用 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: [],
};

【讨论】：