Skip to content

Instantly share code, notes, and snippets.

@lgladdy

lgladdy/tailwind.config.js

Last active April 3, 2024 00:36
Show Gist options
  • Save lgladdy/f11d71cba6ce5b6f460778e461dd84a7 to your computer and use it in GitHub Desktop.
Save lgladdy/f11d71cba6ce5b6f460778e461dd84a7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lgladdy revised this gist Mar 8, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions tailwind.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -21,10 +21,10 @@ plugins: [

    for (const [color, value] of Object.entries(paletteColors)) {
    addComponents({
    [`.has-${_.kebabCase(color)}-background-color`]: {
    [`.wp-block .has-${_.kebabCase(color)}-background-color`]: {
    backgroundColor: value,
    },
    [`.has-${_.kebabCase(color)}-color`]: {
    [`.wp-block .has-${_.kebabCase(color)}-color`]: {
    color: value,
    }
    })
  2. lgladdy created this gist Mar 8, 2021.
    34 changes: 34 additions & 0 deletions tailwind.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    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({
    [`.has-${_.kebabCase(color)}-background-color`]: {
    backgroundColor: value,
    },
    [`.has-${_.kebabCase(color)}-color`]: {
    color: value,
    }
    })
    }

    })
    ]