Skip to content

Instantly share code, notes, and snippets.

@ronssij
Last active May 20, 2022 20:52
Show Gist options
  • Save ronssij/d31b30de50200aeddd49c82b7f474b18 to your computer and use it in GitHub Desktop.
Save ronssij/d31b30de50200aeddd49c82b7f474b18 to your computer and use it in GitHub Desktop.
Extending Tailwind CSS color palattes to create custom prefxied colors.
const plugin = require('tailwindcss/plugin')
/**
* Utlizes tailwind colors config and icon-{color} class is created, analog to bg- and text- classes.
*
* eg. class="icon-white"
*/
const generateColors = (e, colors, prefix) =>
Object.keys(colors).reduce((acc, key) => {
if (typeof colors[key] === 'string') {
return {
...acc,
[`${prefix}-${e(key)}`]: {
'color': colors[key],
},
}
}
return { ...acc, ...generateColors(e, colors[key], `${prefix}-${e(key)}`) }
}, {})
module.exports = plugin.withOptions(({ className = 'icon' } = {}) => {
return ({ e, addUtilities, theme, variants }) => addUtilities(generateColors(e, theme('colors'), `.${className}`), variants('svgColor'))
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment