Ninja Pumpkin Mutants

    tailwind-color-vars

    0.1.3 • Public • Published

    This plugin generates a set of css vars from tailwinds colors list and puts then into the :root selector.

    Install

    yarn add tailwind-color-vars
    # or 
    npm i tailwind-color-vars

    API

    colorVars({ colors, strategy = 'override', colorTransform } = {})

    Creates tailwind plugin that registers colors from config as css vars.

    • colors: [optional] an object with colors to extend, replace or override config colors
    • strategy: [optional] string:
      • extend_: will merge config colors with given colors, config ones will take priority
      • override_: will merge config colors with given colors, given ones will take priority
      • replace_: will discard config colors and only use given ones
    • colorTransform: [optional] Function that will be invoked on every color value before injection

    Usage

    In tailwind config

    const colorVars = require('tailwind-color-vars')
    module.exports = {
      plugins: [
        colorVars(),
      ],
    }

    This will produce css like:

    :root { 
      --transparent: transparent;
      --black: #22292f;
      --grey-darkest: #3d4852;
      --grey-darker: #606f7b;
      --grey-dark: #8795a1;
      ...
    }

    To extend, override or replace colors:

    const colorVars = require('tailwind-color-vars')
    module.exports = {
      plugins: [
        colorVars({
          colors: {
            'primary': 'rgba(0, 80, 200, 0.7)',
            'black': 'black',
          },
          // default value, this will give passed values priority
          strategy: 'override',  
        }),
      ],
    }

    This will produce:

    :root {
      --primary: rgba(0, 80, 200, 0.7);
      --transparent: transparent;
      --black: black;
      ...
    }

    To process every color value before injection you can specify colorTransform. For example you can transform all values to a set value type:

    const colorVars = require('tailwind-color-vars')
    const tinycolor = require("tinycolor2");
    module.exports = {
      plugins: [
        colorVars({
          colors: {
            'primary': 'rgba(0, 80, 200, 0.7)',
            'black': 'black',
          },
          // this will give priority to config values
          // so black will not be overridden
          strategy: 'extend',
          // this will parse each color value and return it in `rgb()/rgba()` format
          colorTransform: col => tinycolor(col).toRgbString()
        }),
      ],
    }

    This will produce:

    :root {
      --primary: rgba(0, 80, 200, 0.7);
      --black: rgb(34, 41, 47);
      --transparent: rgba(0, 0, 0, 0);
      --grey-darkest: rgb(61, 72, 82);
      --grey-darker: rgb(96, 111, 123); 
      ...
    }

    Install

    npm i tailwind-color-vars

    DownloadsWeekly Downloads

    13

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    3.76 kB

    Total Files

    3

    Last publish

    Collaborators

    • n1kk