A tailwind plugin for generating WordPress block editor (Gutenberg) color css styles from the tailwind palette

tailwind.config.js

const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

plugins: [
  plugin(function({ addComponents, theme }) {
    const colors = theme('colors', {})
    const exclude = ['transparent', 'current']
    const paletteColors = []

    for (const [key, value] of Object.entries(colors)) {
      if ('string' == typeof(value)) {
        if (_.includes(exclude, key)) continue;
        paletteColors[key] = value
      } else {
        for (const [subkey, subvalue] of Object.entries(value)) {
          if (_.includes(exclude, key)) continue;
          paletteColors[key+'-'+subkey] = subvalue
        }
      }
    }

    for (const [color, value] of Object.entries(paletteColors)) {
      addComponents({
        [`.wp-block .has-${_.kebabCase(color)}-background-color`]: {
          backgroundColor: value,
        },
        [`.wp-block .has-${_.kebabCase(color)}-color`]: {
          color: value,
        }
      })
    }

  })
]