Search code examples
reactjstailwind-cssstorybook

Tailwind - Conditional class rendering

I'm trying to play around with Reactjs, storybook and tailwind to create a custom UIUX library, but I cannot make work the conditional rendering of the classes, it won't work in the storybook at least (for any class, rounded, bg-color, color, etc), I cannot see any change and inspecting the CSS, no CSS is applied.

EDIT:

The classes I'm trying to add are not concatenated, they are full class names such as "bg-red-500", "bg-green-600", etc.

I have this code:

import React from 'react';
import cx from 'classnames';

interface ButtonProps {
   label: string;
   color: string;
   bgColor: string;
   size: 'sm' | 'md' | 'lg';
   rounded?: 'sm' | 'md' | 'lg' | 'full';
   disabled?: boolean;
   onClick?: (event: MouseEvent | any) => void;
}

const Button = ({ label, bgColor, color, size, rounded }: ButtonProps) => {
   const DEFAULT_BG_COLOR = color ? color : 'bg-green-500';
   const DEFAULT_ROUNDED = rounded ? 'rounded-' + rounded : 'rounded-full';

   const btnClass = cx(DEFAULT_BG_COLOR, DEFAULT_ROUNDED);

   console.log(btnClass);

   return (
      <button className={btnClass} onClick={() => console.log('Clicked')}>
         <div> {label} </div>
      </button>
   );
};

export default Button;

enter image description here

What am I doing wrong?

Regards.

Solution

  • I suspect there are 2 issues with your code.

    1st which i'm absolute certain is that you shouldn't concatenate tailwind classes because these classes can't be detected by tailwind therefore are not included in the compiled file. You can read more here.

    that said if you insist, you could safelist the classes you want to concatenate.

    and 2nd if regular classes are not working, then you should make sure all the files with tailwind classes are included in the content array in tailwind config file