Allow setting a default value of <alpha-value>

[TastyPi]

For easier theming, we're defining custom colours using CSS variables, so we're using the recommended approach e.g.

colors: {
  primary: "rgb(var(--color-primary) / <alpha-channel>)"
}

However, we've now reached a situation where we'd like one of the colours to have an alpha channel set. Obviously we can define it as just "var(--color-slightly-transparent)", but then AFAICT it isn't possible to override that default value the standard Tailwind way e.g. bg-slighty-transparent/0`. A use-case for this would be for changing the opacity as part of a transition.

A potential syntax I made up without much thought would be:

colors: {
  "slightly-transparent": "rgb(var(--color-slightly-transparent) / <alpha-channel:50%>)"
}

For extra credit, any arbitrary value could be used there, e.g. rgb(var(--my-color) / <alpha-channel:var(--my-color-alpha)).

(Note that I don't actually have a need for this yet, but I wanted to bring it to the Tailwind team's attention in case it's something that would be easy to implement)

[wongjn]

This is actually already available in Tailwind – replace <alpha-channel> with the alpha value you'd like as the default. See this Tailwind Play (open the Generated CSS panel).

[TastyPi]

Oh awesome! I think the Tailwind documentation needs to be updated to reflect that, as it isn't mentioned where I would expect to find that https://tailwindcss.com/docs/customizing-colors#using-css-variables.

[aenial51]

sorry guys I don't know about Tailwind documentation and link which you shared is not working on clicking message displayed invalid URL.
CheckMyRota

[TastyPi]

I've created a pull request to add an explanation to Tailwind's documentation site, maybe that will help you https://github.com/tailwindlabs/tailwindcss.com/pull/1487/files.