Using arbitrary color as rgba()

[WhitWaldo]

With the new 3.0 release, we can use arbitrary colors (hooray!) in the markup.

If I do something like bg-[#f03232], it correctly registers the background color as such, but I'm unable to do the same with an rgba notation. Doing something like bg-[rgba(240, 50, 50, 0.75] doesn't register as any color at all and I can't find any notes in the documentation that indicate this isn't allowed.

Is rgba notation allowed in arbitrary attributes?

[eliottchampault]

@WhitWaldo, with [email protected] you could do something like this bg-{color}-{variationNumber}/{opacity}. You can also do something like bg-[rgb(#,#,#)]/{opacity}.
Here is an example:
bg-orange-500/50 would apply an opacity 0.5 to your orange background-color.

Let me know if this helps.

E

[WhitWaldo]

Perfect - thank you!

[Slamik]

@WhitWaldo, with [email protected] you could do something like this bg-{color}-{variationNumber}/{opacity}. You can also do something like bg-[rgb(#,#,#)]/{opacity}. Here is an example: bg-orange-500/50 would apply an opacity 0.5 to your orange background-color.

Let me know if this helps.

E

Is it possible to do the same with var?
Ex. bg-[var(--main-color)]/50

[marwan562]

The code bg-[var(--main-color)]/50 doesn't work for lightening a color because:

Tailwind CSS /50 is for transparency, not lightening.
Tailwind CSS cannot modify the brightness of a CSS variable (var(--main-color)) directly. 

How to Lighten a Color Dynamically:

If they want to lighten a color dynamically (like --main-color), they need to use JavaScript to calculate the lightened color.

A Simple Example:
Here’s a function to lighten a hex color by a percentage:

 function lightenHexColor(hex, percentage) {
  hex = hex.replace(/^#/, ''); // Remove "#" if present
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  const lighten = (channel) => Math.min(255, channel + (255 - channel) * (percentage / 100));

  const newR = lighten(r);
  const newG = lighten(g);
  const newB = lighten(b);

  return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
}

How to use it
 
const mainColor = '#3498db'; // Example color
const lightenedColor = lightenHexColor(mainColor, 20); // 20% lighter


<div style="--main-color-light: ${lightenedColor}">
  <div class="bg-[var(--main-color-light)]">Lightened Background</div>
</div>

[howard-repos]

@eliottchampault bg-[rgb(255, 50, 50)]/50 not working in my project. Did I miss something?

[adamsaparudin]

Correct code is using this bg-[rgb(255,50,50)]/[.10] mean background: rgba(255, 50, 50, 0.1)

[codenoobforreal]

@adamsaparudin your reply should be marked as answer too.bg-[rgb(255,50,50)]/50 work but bg-[rgb(255,50,50)]/5 doesn't.bg-[rgb(255,50,50)]/[.05] work!

[zsilverzweig]

This guy doesn't work, expected?

const DynamicButton: React.FC<DynamicButtonProps> = ({
  icon: Icon,
  color,
  onClick,
  children,
}) => {
  const buttonStyles = `inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[${color}-600] hover:bg-[${color}-700] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[${color}-500]`;

  return (
    <button onClick={onClick} className={buttonStyles}>
      {Icon}
      {children}
    </button>

[WhitWaldo]

@zsilverzweig You might have a lot more luck getting an answer on a new issue as this one is 2.5 years old

[mrkaluzny]

This guy doesn't work, expected?

const DynamicButton: React.FC<DynamicButtonProps> = ({
  icon: Icon,
  color,
  onClick,
  children,
}) => {
  const buttonStyles = `inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[${color}-600] hover:bg-[${color}-700] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[${color}-500]`;

  return (
    <button onClick={onClick} className={buttonStyles}>
      {Icon}
      {children}
    </button>

Expected -> Tailwind only matches strings -> bg-red-500 is matched bg-{$red}-500 is not. Tailwind uses super simple string matching.

to do that you can use a switch that matches color to different classes for each color.

switch (color) {
 case 'red':
     const buttonColors = 'text-red-500' 
  // ...and so on
}

[TheOnlyWayUp]

If you're still having issues, make sure there are no spaces inside the function!

hsl(198, 22%, 21%)  # ❌
hsl(198,22%,21%)    # ✅