将文件导入 Tailwind.Config.JS

Question

我正在开始使用 Tailwindcss。我想用材料设计调色板覆盖默认的顺风调色板。我可以轻松地将所有材料设计调色板剪切并粘贴到文件中tailwind.config.js，一切正常。即，像这样：

module.exports = {
  theme: {
    colors: {
      transparent: "transparent",
      black: "#000000",
      white: "#FFFFFF",

      "red-50": "#FFEBEE",
      "red-100": "#FFCDD2",
      "red-200": "#EF9A9A",
      "red-300": "#E57373",
      "red-400": "#EF5350",
      "red-500": "#F44336",
      "red-600": "#E53935",
      "red-700": "#D32F2F",
      "red-800": "#C62828",
      "red-900": "#B71C1C",
      "red-a100": "#FF8A80",
      "red-a200": "#FF5252",
      "red-a400": "#FF1744",
      "red-a700": "#D50000",

      ...
    },
    extend: {}
  },
  variants: {},
  plugins: []
};

唯一的问题是材料设计调色板对象相当大——所以我宁愿将其保存为单独的文件并将require其导入（或）到该tailwind.config.js文件中。像这样的东西：

// material-palette.js
const colors = {
      transparent: "transparent",
      black: "#000000",
      white: "#FFFFFF",

      "red-50": "#FFEBEE",
      "red-100": "#FFCDD2",
      "red-200": "#EF9A9A",
      "red-300": "#E57373",
      "red-400": "#EF5350",
      "red-500": "#F44336",
      "red-600": "#E53935",
      "red-700": "#D32F2F",
      "red-800": "#C62828",
      "red-900": "#B71C1C",
      "red-a100": "#FF8A80",
      "red-a200": "#FF5252",
      "red-a400": "#FF1744",
      "red-a700": "#D50000",

      ...
    }

// tailwind.config.js
const colors = require("./material-palette");

module.exports = {
  theme: {
    colors,
    extend: {}
  },
  variants: {},
  plugins: []
};

但这是行不通的。我还尝试使用spread operator颜色对象，如下所示：

// tailwind.config.js
const colors = require("./material-palette");

module.exports = {
  theme: {
    ...colors,
    extend: {}
  },
  variants: {},
  plugins: []
};

但这也行不通。

知道如何让它发挥作用吗？

谢谢。

Answer 1

您还必须添加密钥colors。

所以colors: colors在你的情况下

module.exports = {
    theme: {
        extend: {
            colors: colors, // instead of just Colors
        }
    }
}