Class

The <ClassHelper/> is a utility to help you apply classes dynamically. It can be used with either SCSS or Tailwind styles.

The first argument is the Style object (your imported Tailwind or SCSS object). The second argument is a list of classes you want to apply. You can pass in the prop object if your class names match your prop names If you style object has a class named base then this will be applied automatically. It returns a style object that you can pass directly to the className prop of any element.

import { ClassHelper } from 'components/lib';
import Style from './card.tailwind.js';

const cardStyle = ClassHelper(Style, {

  card: true,
  className: props.className, // pass the className prop
  shadow: props.shadow, // set dynamically using props

});