@therobot/tailwind-theme v0.1.4

Collection of colors from other projects

material

open-color

tailwind

thumbprint

segment

carbon

photon

Material

// tailwind.config.js
const { colors, boxShadow } = require('@therobot/tailwind-theme')

module.exports = {
  theme: {
    colors: {
      ...colors.material,
      gray: colors.material.grey,
    },
    extend: {
      boxShadow: boxShadow.material,
    },
  },
}

Material Elevation Colors

const { colors, colorElevation } = require('@therobot/tailwind-theme')
module.exports = {
  theme: {
    colors: {
      ...colors.open,
      purple: colors.open.violet,
    },
    extend: {
      boxShadow: theme => ({
        // .shadow-elevation-[1...24]
        // .shadow-elevation-[1...24]-teal
        ...colorElevation(
          {
            default: 'black',
            teal: theme('colors.teal.1000'),
          },
          // optional elevation levels
          // defaults to [2, 4, 8, 16, 24]
          [1, 3, 9, 12, 18, 24],
          // optional class prefix
          // defaults to `elevation`
          'elevation'
        ),

        // .shadow-2-orange
        ...colorElevation({ orange: theme('colors.orange.800') }, [2], ''),
      }),
    },
  },
}

open-colors

// tailwind.config.js
const { colors } = require('@therobot/tailwind-theme')
module.exports = {
  theme: {
    colors: {
      ...colors.open,
      purple: colors.open.violet,
    },
  },
}