Support colors with alpha values

[RyanClementsHax]

Below is the feature request for supporting colors with alpha values when theming. I'd love feedback from the community before implementing this feature. Here are all of my thoughts so far. Let me know what y'all think and if there are any other implementations we could consider.

Background

Currently this plugin strips the alpha channel from any color it is configured to theme. This is to support tailwind's opacity classes.

For example, if you use a class like text-gray-50, a default tailwind class, the following class gets generated.

.text-gray-50 {
  --tw-text-opacity: 1;
  color: rgb(249 250 251 / var(--tw-text-opacity))
}

Tailwind then is able to control the opacity with --tw-text-opacity. For example, the class text-opacity-50 would generate the following class.

.text-opacity-50 {
  --tw-text-opacity: 0.5
}

tailwindcss-themer tries to honor this feature. For example, if you have a plugin config like the following....

require('tailwindcss-themer')({
  defaultTheme: {
    extend: {
      colors: {
        primary: '#fff'
      }
    }
  },
  themes: [
    {
      name: 'darkMode',
      extend: {
        colors: {
          primary: '#000'
        }
      }
    }
  ]
})

....and use a class like text-primary, the following classes will be generated.

:root {
  --colors-primary: 255, 255, 255;
}

.darkMode {
    --colors-primary: 0, 0, 0;
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-primary), var(--tw-text-opacity));
}

This allows colors to be themed and opacity classes to work. This plugin, as a result, needs to strip the alpha value from the specified color for this to work as there is no way to configure the --tw-text-opacity variable (to the best of my knowledge).

Problem

There are real use cases for using tailwindcss-themer with colors with alpha values, but tailwind's doesn't allow for the default opacity value of colors to be specified. In other words:

.bg-gray-50 {
  --tw-bg-opacity: 1; /* 👈🏻 this can't be configured */
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

This thereby forces devs to choose between having a themed color that uses the alpha channel and that color's opacity being configurable via tailwind's opacity classes.

Use cases

Color palettes with alpha values

Some devs want to use palettes with that use alpha values like radix ui colors as exemplified in #74.

transparent

Some devs want to have transparent be a theme value as exemplified in #77.

Options

(Preferred) Use the opacity modifier syntax.

Configure the default opacity value by using a value like rgb(255 0 0 / <alpha-value>) for all colors without alpha channels and replace <alpha-value> with the alpha channel value for colors with alpha e.g. rgb(255 0 0 / 0.5). The docs unfortunately don't reflect this, but this is a supported behavior.

Pros:

• Implements all functionality cleanly
• No need to make commits upstream

Cons:

• Needs a major version bump
• Doesn't support older classes like bg-opacity-50, but they're deprecated

(Preferred) Work with tailwind upstream to allow this to be configurable

This would entail getting this committed upstream so this plugin could configure that value.

Pros:

• Few surprises i.e. colors with alpha channels "just work"

Cons:

• Takes a while
• No guarantee this will be accepted

Silently opt out of opacity classes when a color with an alpha channel is given

This would mean that this plugin preserves the alpha channel but doesn't allow that color to be configurable via opacity classes.

Pros:

• Simple, quick change to this plugin

Cons:

• Opportunity for devs to be "surprised" when opacity classes don't work

Resolution

Setting the default opacity value is supported via the opacity modifier syntax. The docs unfortunately don't reflect this which is why this took longer than expected to implement.

PR: #111

[emmmarosewalker]

Hello! I would love this as an option. We do not tend to use opacity due to how our designers manage tokens and because we wish to use different primitives with different opacities between themes. This is currently preventing me from using your wonderful library. I'd be happy to forgo opacity support if it meant my alpha channels were not stripped.

[RyanClementsHax]

Thanks for the feedback!

I just released this feature in v4. Let me know if this works for you.

https://www.npmjs.com/package/tailwindcss-themer