Button is not applying hover:bg-primary/90 effect

[abdnafees]

The default variant of the Button component is not applying the hover:bg-primary/90 effect defined in the button.jsx file.

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240, 6%, 10%;

        --card: 0 0% 100%;
        --card-foreground: 240 6% 10%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 201, 93%, 38%;
        --primary-foreground: 0, 0%, 100%;

        --secondary: 24, 66%, 57%;
        --secondary-foreground: 240, 6%, 10%;

        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240, 0%, 55%;

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0, 71%, 56%;
        --destructive-foreground: 0, 0%, 100%;

        /*--hover: 201, 93%, 26%;*/

        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --ring: 240 10% 3.9%;
        --radius: 1.0rem;
    }

    .dark {
        --background: 240 10% 3.9%;
        --foreground: 0 0% 98%;

        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;

        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;

        --primary: 201, 93%, 38%;
        --primary-foreground: 240 5.9% 10%;

        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;

        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;

        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;

        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 240 4.9% 83.9%;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}

button.jsx

import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const buttonVariants = cva(
    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
    {
        variants: {
            variant: {
                default:
                    'bg-primary text-primary-foreground hover:bg-primary/90',
                destructive:
                    'bg-destructive text-destructive-foreground hover:bg-destructive/90',
                outline:
                    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
                secondary:
                    'bg-secondary text-secondary-foreground hover:bg-secondary/80',
                ghost: 'hover:bg-accent hover:text-accent-foreground',
                link: 'text-primary underline-offset-4 hover:underline',
            },
            size: {
                default: 'h-10 px-4 py-2',
                sm: 'h-9 rounded-md px-3',
                lg: 'h-11 rounded-md px-8',
                icon: 'h-10 w-10',
            },
        },
        defaultVariants: {
            variant: 'default',
            size: 'default',
        },
    }
);

const Button = React.forwardRef(
    ({ className, variant, size, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'button';
        return (
            <Comp
                className={cn(buttonVariants({ variant, size, className }))}
                ref={ref}
                {...props}
            />
        );
    }
);
Button.displayName = 'Button';

export { Button, buttonVariants };

My page where I am using the Button component.

'use client';

import React from 'react';
import { useFormState } from 'react-dom';
import { handleLogin } from '@/lib/login.actions';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Checkbox } from '@/components/ui/checkbox';

function SigninPage() {
    const [errorMessage, dispatch] = useFormState(handleLogin, undefined);
    const [visible, setVisible] = React.useState(false);
    return (
        <form
            className="m-auto flex min-w-[400px] flex-col justify-center gap-2 p-12 align-middle"
            aria-label="Signin Form"
            action={dispatch}
        >
            <h1 className="text-2xl font-semibold not-italic">Sign in</h1>
            <p className="text-md">Please enter your credentials to proceed</p>
            <div className="grid w-full max-w-sm items-center gap-1.5">
                <Label htmlFor="email">Email</Label>
                <Input
                    type="email"
                    id="email"
                    name="email"
                    aria-label="Email"
                    placeholder="Email"
                />
            </div>

            <div className="grid w-full max-w-sm items-center gap-1.5">
                <Label htmlFor="password">Password</Label>
                <div className="flex flex-row items-baseline justify-between gap-2">
                    <Input
                        type={visible ? 'text' : 'password'}
                        id="password"
                        name="password"
                        aria-label="Password"
                        placeholder="Password"
                        required
                    />
                    <FontAwesomeIcon
                        icon={visible ? faEye : faEyeSlash}
                        onClick={() => setVisible(!visible)}
                    />
                </div>
            </div>
            <div className="text-md text-destructive">
                {errorMessage && <></>}
            </div>
            <div className="mt-4 flex items-stretch justify-between gap-5">
                <div className="flex items-center justify-between gap-2 py-1.5 pl-2">
                    <Checkbox id="remember" aria-label="Remember Me" />
                    <label htmlFor="remember">Remember me</label>
                </div>
                <a href="#" className="my-auto grow self-center">
                    Forgot password?
                </a>
            </div>
            <Button type="submit">Submit</Button>
            <Button variant="ghost">
                <Link href="/auth/signup-user">Apply for an account</Link>
            </Button>
        </form>
    );
}

export default SigninPage;

Is there anything I am doing wrong?

[davve5]

It seems to be working on my setup, even so, it's not a problem with shadcn, but more likely with tailwind css itself, which is not generating the class styles correctly. Have you tried restarting the project and reinstalling node_modules?

[areebbbb]

try using hsla(),

[abdnafees]

@davve5 it did not work. I have found a work around but it's not a clean solution.

[lloydrichards]

you've added commas to the tokens in the css:

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 201, 93%, 38%;
        --primary-foreground: 0, 0%, 100%;

this will cause the tailwind application of opacity to fail. just remove the commas and it should work fine. Should match how the popover values are input

[joffenhopland]

@abdnafees did you figure it out? I'm stuck on the same problem.

[abdnafees]

@joffenhopland I don't remember how I fixed it and I am no longer working on the project.

[m-dennisgocong]

@joffenhopland I had the same problem because I forgot to remove commas.

you've added commas to the tokens in the css:

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 201, 93%, 38%;
        --primary-foreground: 0, 0%, 100%;

this will cause the tailwind application of opacity to fail. just remove the commas and it should work fine. Should match how the popover values are input

[WarinSKM]

can i use this effect with hex code ?

[lloydrichards]

The short answer is no, you need to define your CSS variables as just the colour channels for HSL, RGB or RGBA.

There is a longer explanation in the tailwind docs that is helpful to understand why

[anyuruf]

I had the same problem and after reading the docs realized that I had to update the color function in tailwind.config file. The lightDarkVar function to include the alpha values just like @lloydrichards mentioned above function lightDarkVar(baseName) { return `var(--theme-light, hsl(var(--${baseName}) / <alpha-value>)) var(--theme-dark, hsl(var(--${baseName}-dark) / <alpha-value>))`; }

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.