Tailwind Config with plugin to expose color as css var and generate a SCSS var file

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const fs = require('fs');
const path = require('path');
const colors = require('tailwindcss/colors');

module.exports = {
  prefix: 'tw-',
  content: [
    './src/**/*.{html,vue}',
  ],
  theme: {
    screens: {
      sm: '480px', // Mobile
      md: '768px', // iPad in portrait or Mobile in landscape
      lg: '976px', // iPad in landscape to those 1280/1366 13"-14" laptop
      xl: '1440px', // The "Sub Full HD", slightly better laptop
      '2xl': '1600px', // The "Sub Full HD", expensive laptop, most monitor
      '3xl': '1800px', // The "Full HD", 4k screen in 200%, most monitor
      '4xl': '2400px', // The "2K", 5k screen in 200%, a few of the prestige 5k user
    },
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
      },
      fontSize: {
        // Header
        'ap-h1': ['4rem', {   // 64px
          lineHeight: '5rem', // 80px
          letterSpacing: '-3px', // -3px
          fontWeight: '700', // Bold-700
        }],
        'ap-h2': ['3rem', { // 48px
          lineHeight: '3.5rem', // 56px
          letterSpacing: '-1px', // -1px
          fontWeight: '700', // Bold-700
        }],
        'ap-h3': ['1.75rem', { // 28px
          lineHeight: '2.5rem', // 40px
          letterSpacing: '0px', // 0px
          fontWeight: '700', // Bold-700
        }],
        'ap-h4': ['1.25rem', { // 20px
          lineHeight: '1.75rem', // 28px
          letterSpacing: '0', // 0px
          fontWeight: '700', // Bold-700
        }],

        // Body
        'ap-body': ['1rem', { // 16px
          lineHeight: '1.75rem', // 28px
          letterSpacing: '-0.25px', // -0.25px
          fontWeight: '400', // Regular-400
        }],
        'ap-body-regular': ['1rem', { // 16px
          lineHeight: '1.75rem', // 28px
          letterSpacing: '-0.25px', // -0.25px
          fontWeight: '400', // Regular-400
        }],
        'ap-body-medium': ['1rem', { // 16px
          lineHeight: '1.75rem', // 28px
          letterSpacing: '-0.25px', // -0.25px
          fontWeight: '500', // Medium-500
        }],
        'ap-body-bold': ['1rem', { // 16px
          lineHeight: '1.75rem', // 28px
          letterSpacing: '-0.25px', // -0.25px
          fontWeight: '700', // Bold-700
        }],

        // Label
        'ap-label': ['0.875rem', { // 14px
          lineHeight: '1.5rem', // 24px
          letterSpacing: '0px', // 0px
          fontWeight: '500', // Medium-500
        }],
        'ap-label-medium': ['0.875rem', { // 14px
          lineHeight: '1.5rem', // 24px
          letterSpacing: '0px', // 0px
          fontWeight: '500', // Medium-500
        }],
        'ap-label-bold': ['0.875rem', { // 14px
          lineHeight: '1.5rem', // 24px
          letterSpacing: '0px', // 0px
          fontWeight: '700', // Bold-700
        }],

        // Label (Uppercase)
        'ap-label-uppercase': ['0.875rem', { // 14px
          lineHeight: '1rem', // 1.5rem
          letterSpacing: '1px', // 1px
          fontWeight: '500', // Medium-500
        }],
        'ap-label-uppercase-medium': ['0.875rem', { // 14px
          lineHeight: '1rem', // 1.5rem
          letterSpacing: '1px', // 1px
          fontWeight: '500', // Medium-500
        }],
        'ap-label-uppercase-bold': ['0.875rem', { // 14px
          lineHeight: '1rem', // 1.5rem
          letterSpacing: '1px', // 1px
          fontWeight: '700', // Bold-700
        }],

        // Fine Print
        'ap-fine-print': ['0.75rem', { // 12px
          lineHeight: '1.25rem', //  20px
          letterSpacing: '0px', // 0px
          fontWeight: '500', // Medium-500
        }],
      },
      // letterSpacing: {
      // }

      spacing: {
        '18': '4.5rem', // 72px
      },
      colors: {
      // ...colors,

      // VMS Color Library
      'vms-main-dark-blue': {
        DEFAULT: '#323C51',
        // light: '',
        // dark: '',
      },

      // Alphapod Color Library
      // Primary
      'ap-sunset-orange': {
        DEFAULT: '#FA4B4B',
        // light  : '#FA4B4B',
        // dark   : '#FA4B4B',
      },
      'ap-dodger-blue': {
        DEFAULT: '#007AFF',
        // light  : '#007AFF',
        // dark   : '#007AFF',
      },
      'ap-med-sea-green': {
        DEFAULT: '#28C85F',
        // light  : '#28C85F',
        // dark   : '#28C85F',
      },
      'ap-amber': {
        DEFAULT: '#FFC000',
        // light  : '#FFC000',
        // dark   : '#FFC000',
      },

      // Reds
      'ap-melon': {
        DEFAULT: '#FFB4AA',
        // light  : '#FFB4AA',
        // dark   : '#FFB4AA',
      },
      'ap-salmon': {
        DEFAULT: '#FA8273',
        // light  : '#FA8273',
        // dark   : '#FA8273',
      },
      'ap-brink-pink': {
        DEFAULT: '#F57382',
        // light  : '#F57382',
        // dark   : '#F57382',
      },
      'ap-caberet': {
        DEFAULT: '#DC4664',
        // light  : '#DC4664',
        // dark   : '#DC4664',
      },
      'ap-tapestry': {
        DEFAULT: '#B45F78',
        // light  : '#B45F78',
        // dark   : '#B45F78',
      },
      'ap-red-orange': {
        DEFAULT: '#F54B23',
        // light  : '#F54B23',
        // dark   : '#F54B23',
      },
      'ap-persian-red': {
        DEFAULT: '#DC1E1E',
        // light  : '#DC1E1E',
        // dark   : '#DC1E1E',
      },

      // Greens
      'ap-turquoise': {
        DEFAULT: '#55E6CD',
        // light  : '#55E6CD',
        // dark   : '#55E6CD',
      },
      'ap-robins-egg': {
        DEFAULT: '#00CDC8',
        // light  : '#00CDC8',
        // dark   : '#00CDC8',
      },
      'ap-caribbean-green': {
        DEFAULT: '#00CEB0',
        // light  : '#00CEB0',
        // dark   : '#00CEB0',
      },
      'ap-shamrock': {
        DEFAULT: '#19DC8C',
        // light  : '#19DC8C',
        // dark   : '#19DC8C',
      },
      'ap-jungle-green': {
        DEFAULT: '#23AF87',
        // light  : '#23AF87',
        // dark   : '#23AF87',
      },
      'ap-trop-rainforest': {
        DEFAULT: '#0A735F',
        // light  : '#0A735F',
        // dark   : '#0A735F',
      },

      // Yellows
      'ap-picasso': {
        DEFAULT: '#FFEB91',
        // light  : '#FFEB91',
        // dark   : '#FFEB91',
      },
      'ap-lemon': {
        DEFAULT: '#FAE61E',
        // light  : '#FAE61E',
        // dark   : '#FAE61E',
      },
      'ap-orange-peel': {
        DEFAULT: '#FF9600',
        // light  : '#FF9600',
        // dark   : '#FF9600',
      },
      'ap-desert-sand': {
        DEFAULT: '#EBCDAF',
        // light  : '#EBCDAF',
        // dark   : '#EBCDAF',
      },
      'ap-sandrift': {
        DEFAULT: '#AF9682',
        // light  : '#AF9682',
        // dark   : '#AF9682',
      },

      // Blues
      'ap-light-blue': {
        DEFAULT: '#B9D7EA',
        // light  : '#B9D7EA',
        // dark   : '#B9D7EA',
      },
      'ap-maya-blue': {
        DEFAULT: '#78AAFF',
        // light  : '#78AAFF',
        // dark   : '#78AAFF',
      },
      'ap-navy-blue': {
        DEFAULT: '#005FFA',
        // light  : '#005FFA',
        // dark   : '#005FFA',
      },
      'ap-cerulean-blue': {
        DEFAULT: '#285AC8',
        // light  : '#285AC8',
        // dark   : '#285AC8',
      },
      'ap-lochmara': {
        DEFAULT: '#2864AA',
        // light  : '#2864AA',
        // dark   : '#2864AA',
      },
      'ap-smalt': {
        DEFAULT: '#003296',
        // light  : '#003296',
        // dark   : '#003296',
      },
      'ap-blue-violet': {
        DEFAULT: '#964BFA',
        // light  : '#964BFA',
        // dark   : '#964BFA',
      },
      'ap-hamlindigo-blue': {
        DEFAULT: '#6276A3',
        // light  : '#6276A3',
        // dark   : '#6276A3',
      },

      // Neutrals
      'ap-white': {
        DEFAULT: '#FFFFFF',
        // light  : '#FFFFFF',
        // dark   : '#FFFFFF',
      },
      'ap-snow': {
        DEFAULT: '#FAFAFA',
        // light  : '#FAFAFA',
        // dark   : '#FAFAFA',
      },
      'ap-white-smoke': {
        DEFAULT: '#F0F0F0',
        // light  : '#F0F0F0',
        // dark   : '#F0F0F0',
      },
      'ap-whisper': {
        DEFAULT: '#E6E6E6',
        // light  : '#E6E6E6',
        // dark   : '#E6E6E6',
      },
      'ap-gainsboro': {
        DEFAULT: '#DCDCDC',
        // light  : '#DCDCDC',
        // dark   : '#DCDCDC',
      },
      'ap-very-light-grey': {
        DEFAULT: '#C8C8C8',
        // light  : '#C8C8C8',
        // dark   : '#C8C8C8',
      },
      'ap-nobel': {
        DEFAULT: '#969696',
        // light  : '#969696',
        // dark   : '#969696',
      },
      'ap-dim-grey': {
        DEFAULT: '#646464',
        // light  : '#646464',
        // dark   : '#646464',
      },
      'ap-night-rider': {
        DEFAULT: '#323232',
        // light  : '#323232',
        // dark   : '#323232',
      },
      'ap-nero': {
        DEFAULT: '#242424',
        // light  : '#242424',
        // dark   : '#242424',
      },
      'ap-black': {
        DEFAULT: '#000000',
        // light  : '#000000',
        // dark   : '#000000',
      },
    },
    },
  },
  plugins: [
    /*
      https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574

      This is a simple Tailwind plugin to expose all of Tailwind's colors,
      including any custom ones, as custom css properties on the :root element.

      And export a SCSS $variable file for all the colors.
    */
    function ({ addBase, theme }) {
      function extractColorVars (colorObj, colorGroup = '') {
        return Object.keys(colorObj).reduce((vars, colorKey) => {
          const value = colorObj[colorKey];
          const cssVariable = colorKey === "DEFAULT" ? `--color${colorGroup}` : `--color${colorGroup}-${colorKey}`;

          const newVars =
            typeof value === 'string'
              ? { [cssVariable]: value }
              : extractColorVars(value, `-${colorKey}`);

          return { ...vars, ...newVars };
        }, {});
      }

      addBase({
        ':root': extractColorVars(theme('colors')),
      });

      // Here create the SCSS $variable
      const scssColorDirectory = 'src/css/generated/';
      const scssColorFilename = 'tailwind_colors.scss';
      fs.mkdirSync(path.join(__dirname, scssColorDirectory), { recursive: true });
      const scssColorsOutPath = path.join(__dirname, scssColorDirectory + scssColorFilename);

      fs.unlinkSync(scssColorsOutPath);
      let colors = theme('colors');
      console.log(colors);
      let output = flattener(colors);
      fs.appendFileSync(scssColorsOutPath, output);

      // For some reason this write the output two times
      // fs.unlink(scssColorsOutPath, err => {
      //   if (err && err.code !== 'ENOENT') return console.error(err);
      //   let colors = theme('colors');
      //   let output = flattener(colors);
      //   fs.appendFile(scssColorsOutPath, output, err => {
      //     if (err) return console.error(err);
      //   });
      // });

    }
  ],
};

// Infinite deep recursion obj flattener
const flattener = (obj, parentAccumulator = '', parentKey = '') => {
  return Object.keys(obj).reduce((accumulator, currentKey) => {

    let value = obj[currentKey];

    if (typeof value === 'string') {
    // The exit for the recursion

      if (currentKey == 'DEFAULT') {
        // Basically we want to omit the last child DEFAULT key, which always the last children already
        return accumulator +
           '$--'
           + parentKey        // Always will have value
           + ' : '
           + obj[currentKey]
           + ';\n';
      } else {
        return accumulator +
           '$--'
           + parentKey              // Will be empty for the first level
           + (parentKey ? '-' : '') // If there no parent, then no need this extraneous `-`, e.g. inherit, current, transparent, black, white
           + currentKey             // Always have something
           + ' : '
           + obj[currentKey]
           + ';\n';
      }

    } else {
      // The diving in for the recursion

      let _parentKey = parentKey + currentKey;
      return flattener(value, accumulator, _parentKey);
    }

  }, parentAccumulator);
}