Using ligthen(), darken(), and rgba(), to adjust color variables

[lukees]

I like to keep my colour shades to a minimum to maximize consistency across the interface and make it easier to find suitable colours. One wrinkle I always run into with this, hover, is when I want to use a colour variable with an opacity or lighten or darken it. When using SCSS, no problem: rgba($color, 75%), lighten($color, 10%), darken($color, 10%). The typical use case for this is using a colour in a modal shade or for hover states when you just wanna nudge a colour's brightness.

Is there any way to do something similar with tailwind without having to create additional colour variables?

[tlgreg]

The tailwind way is to specify every color in your config, so it's like a style guide of sorts. While tailwind's colors are handpicked you can use any javascript tool to generate these instead. There are multiple libraries out there for color manipulation.

Another solution instead of using the javascript libraries yourself is to utilize a postcss plugin, like the one that followed the now abandoned color-mod spec. I'd say this would be a better solution only if there would be a live spec for color manipulation in css, but this is not the case currently (as mentioned in the plugin's readme).

An example with the color library:

const Color = require('color')
const alpha = (clr, val) => Color(clr).alpha(val).rgb().string()
const lighen = (clr, val) => Color(clr).lighten(val).rgb().string()
const darken = (clr, val) => Color(clr).darken(val).rgb().string()

module.exports = {
  theme: {
    colors: {
      brand: {
        default: 'hotpink', // => .bg-brand
        lighter: lighten('hotpink', 0.1), // => .bg-brand-lighter
        darker: darken('hotpink', 0.1), // => .bg-brand-darker
        '75': alpha('hotpink', 0.75), // => .bg-brand-75
      },
    },
  },
}