lukeed/clsxPublic

A tiny (239B) utility for constructing `className` strings conditionally.

CSS Variables not working in clsx

AN

andrianfaa opened ·

Hi There, I'm using **clsx** and **tailwindcss** for styling my nextjs project, but when I set css variables in clsx like this ```tsx <figure className={clsx(baseImgWrapperClassName, "flex items-start")}> <Image src={People1} alt="Hero Animation image 1" className={clsx( { "--max-height": "80%" }, "pointer-events-none w-full rounded-[18px] object-cover lg:rounded-[36px]", "about-us-hero-animation-top translate-y-[25%] bg-[#EDDDDD]" )} /> </figure> ``` and css: ```css @keyframes about-us-hero-animation-top { 0% { opacity: 0; height: 0; } 100% { opacity: 1; height: var(--max-height, 100%); } } ```

why is **--max-height** variable unreadable in chrome devtools? it should be displayed as attribute style right? [see devtools screenshot here](https://drive.google.com/file/d/1MYd7PEo4iPfUAvPGVdRN-eta7UUCwE3r/view?usp=sharing)

Btw I tried this method from the example of usage in the clsx documentation (https://github.com/lukeed/clsx#usage) ```tsx // Objects (variadic) clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' }); //=> 'foo --foobar' ```

  1. LU
    lukeed

    As shown in your screenshot, this produces `class="—max-height …"` which is not how you use css vars.

    You need to move the max-height variable as a style property since it needs to be actual CSS and not a DOM string token within the class attribute

    ```jsx <Image className="…" style="—max-height: 80%" … /> ```

    clsx is working fine here. It’s just a misplacement of the CSS var

  2. lukeedclosed3 years ago on GitHub

  3. AN
    andrianfaa
    Author

    I see..., I think the output of using

    ```tsx clsx(...{ "--max-height": "80%" }) ```

    is adding a css variable in the style tag😅

    Btw thank you for the detailed explanation🙏

  4. LU
    lukeed

    clsx only works with the inputs you give it. If you tell it to be there, it’ll be there