Expose tailwind color palette to be able to access tailwind config from javascript/browser

example.ts

import { theme } from './tailwind.static';

console.log(theme.extend.colors.gray[500]);

generate.js

const prettier = require('prettier');
const fs = require('fs');

const tailwind = require('./tailwind.config.js');

// you can skip prettier if you don't need it
prettier.resolveConfigFile().then((configFile) => {
  prettier.resolveConfig(configFile).then((options) => {
    options = { parser: 'babel', ...options };
    const fmt = (str) => prettier.format(str, options);

    const write = (fileName, fileContent) => {
      fs.writeFileSync(fileName, fmt(fileContent), 'utf8');
      console.log(`Wrote ${fileName}`);
    };
    run(write);
  });
});

const run = (write) => {
  // edit this to get access to different parts of config
  const {
    theme: {
      extend: { fontFamily, colors },
    },
  } = tailwind;
  const tailwindStatic = {
    theme: {
      extend: { fontFamily, colors },
    },
  };

  write(
    './src/tailwind.static.js',
    `// DO NOT EDIT: generated by \`yarn generate\`
    
  module.exports = ${JSON.stringify(tailwindStatic)};`
  );
};

package.json

{
  "scripts": {
    "generate": "node generate.js",
  }
}