title: Importing a File Into Tailwind.Config.JS
body: <p>I am getting started with Tailwindcss.  I want to override the default tailwind color palette with the material-design color palette.  I can easily just cut and paste all the material design palette into the <code>tailwind.config.js</code> file and everything works fine.  I.e., like this:</p>
  
  <pre><code>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: []
  };
  
  </code></pre>
  
  <p>The only problem is that the material design color palette object is rather large -- so I would rather save it as a separate file and import (or <code>require</code>) it into the <code>tailwind.config.js</code> file.  Something like this:</p>
  
  <pre><code>// 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: []
  };
  </code></pre>
  
  <p>But this does not work.  I also tried to use the <code>spread operator</code> for the colors object, like this:</p>
  
  <pre><code>// tailwind.config.js
  const colors = require("./material-palette");
  
  module.exports = {
    theme: {
      ...colors,
      extend: {}
    },
    variants: {},
    plugins: []
  };
  </code></pre>
  
  <p>But this also did not work.  </p>
  
  <p>Any idea how to get this to work?</p>
  
  <p>Thanks.</p>