Issue with Tailwind CSS and shadcn/ui in applying background opacity to custom colors

Question

I'm encountering an unexpected behavior when using Tailwind CSS in conjunction with shadcn/ui library for styling buttons. The problem arises when attempting to apply background opacity to a custom color defined in globals.css using HSL values as follows:

--primary: 348, 76%, 64%;

The issue occurs when trying to set the background opacity of a button using this custom color in shadcn/ui. For instance:

<button class="hover:bg-primary/90">Button</button>

The intention here is to have a button with a hover effect that applies 90% opacity to the background color defined as --primary. However, this opacity setting seems to have no effect, and the button retains its original opacity.

I have ensured that the custom color is properly defined and available in the project's global styles. Yet, applying opacity to it using the Tailwind utility classes does not yield the expected result.

Answer 1

Consider checking:

• You have defined the color correctly in the Tailwind configuration. Since you have comma-delimited components, this would imply you are using legacy HSL format, and thus the color value in the Tailwind configuration should look something like:

  module.exports = {
    // …
    theme: {
      extend: {
        colors: {
          primary: 'hsl(var(--primary), <alpha-value>)',
        },
      },
    },
    // …
  };
  

• The file the code appears in is covered by the content file globs.
• The declaration for --primary is applied to an element that is an ancestor of the <button> element.
• There is no other CSS in the project that may be interfering with the <button>'s styling.

Full example:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: 'hsl(var(--primary), <alpha-value>)',
      },
    },
  },
};

:root {
  --primary: 348, 76%, 64%;
}

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<button class="hover:bg-primary/50">Button</button>
<button class="bg-primary">Button</button>

Answer 2

the actual answer is to add / <alpha-value> instead of , <alpha-value>. Here's the snippet:

module.exports = {
  // …
  theme: {
    extend: {
      colors: {
        primary: 'hsl(var(--primary) / <alpha-value>)',
      },
    },
  },
  // …
};

Answer 3

If your file looks like this:

--background: 231, 15%, 18%;
  --foreground: 60, 30%, 96%;

  --muted: 232, 14%, 31%;
  --muted-foreground: 60, 30%, 96%;

  --popover: 231, 15%, 18%;
  --popover-foreground: 60, 30%, 96%;

  --border: 232, 14%, 31%;
  --input: 225, 27%, 51%;

  --card: 232, 14%, 31%;
  --card-foreground: 60, 30%, 96%;

  --primary: 265, 89%, 78%;
  --primary-foreground: 60, 30%, 96%;

  --secondary: 326, 100%, 74%;
  --secondary-foreground: 60, 30%, 96%;

  --accent: 225, 27%, 51%;
  --accent-foreground: 60, 30%, 96%;

  --destructive: 0, 100%, 67%;
  --destructive-foreground: 60, 30%, 96%;

  --ring: 225, 27%, 51%;
  --radius: 1rem;

change it so it doesn't has the ,

like this:

--background: 231 15% 18%;
  --foreground: 60 30% 96%;

  --muted: 232 14% 31%;
  --muted-foreground: 60 30% 96%;

  --popover: 231 15% 18%;
  --popover-foreground: 60 30% 96%;

  --border: 232 14% 31%;
  --input: 225 27% 51%;

  --card: 232 14% 31%;
  --card-foreground: 60 30% 96%;

  --primary: 265 89% 78%;
  --primary-foreground: 60 30% 96%;

  --secondary: 326 100% 74%;
  --secondary-foreground: 60 30% 96%;

  --accent: 225 27% 51%;
  --accent-foreground: 60 30% 96%;

  --destructive: 0 100% 67%;
  --destructive-foreground: 60 30% 96%;

  --ring: 225 27% 51%;
  --radius: 1rem;

Answer 4

I was experiencing a similar issue. Here's a simple fix:

In your tailwind config, where you've defined your custom colours, use hsla instead of hsl.

So from:

primary: {
      DEFAULT: "hsl(var(--primary))",
      foreground: "hsl(var(--primary-foreground))",
    },

to this:

primary: {
          DEFAULT: "hsla(var(--primary))",
          foreground: "hsla(var(--primary-foreground))",
        },

this allows for the alpha value in the calculation