在 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: [],
};

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

Importing tokens from npm in Tailwind CSS config

javascript

css

tailwind-css