Functioncn

  • cn(...inputs): string

  • Tailwind and CSS class application helper function. Uses clsx to make it easy to apply classes conditionally using object syntax, and uses tailwind-merge to make it easy to merge/overwrite Tailwind classes in a programmer-logic-friendly way.

    Note: tailwind-merge is configured to use the prefix tw-, so you must use the same prefix with any Tailwind classes you use with this function to successfully overwrite other Tailwind classes. platform-bible-react is configured to use tw- as its Tailwind prefix, so any Tailwind classes you pass into platform-bible-react components will be compared using the tw- prefix.

    This function was popularized by shadcn/ui. See ByteGrad's explanation video for more information.

    Parameters

    • Rest...inputs: ClassValue[]

      Class strings or clsx conditional class objects to merge. Tailwind classes specified later in the arguments overwrite similar Tailwind classes specified earlier in the arguments

    Returns string

    Class string containing all applicable classes from the arguments based on the rules described above

    Example

    const borderShouldBeBlue = true;
    const textShouldBeRed = true;
    const heightShouldBe20 = false;
    const classString = cn(
      'tw-bg-primary tw-h-10 tw-text-primary-foreground',
      'tw-bg-secondary',
      {
        'tw-border-blue-500': borderShouldBeBlue,
        'tw-text-red-500': textShouldBeRed,
        'tw-h-20': heightShouldBe20,
      },
      'some-class',
    );

    The resulting classString is 'tw-h-10 tw-bg-secondary tw-border-blue-500 tw-text-red-500 some-class'

    • Notice that 'tw-bg-secondary', specified later, overwrote 'tw-bg-primary', specified earlier, because they are Tailwind classes that affect the same css property
    • Notice that 'tw-text-red-500', specified later, overwrote 'tw-text-primary-foreground', specified earlier, because they are Tailwind classes that affect the same css property
    • Notice that 'tw-h-20', specified later, did not overwrite 'tw-h-10', specified earlier, because 'tw-h-20' is part of a conditional class object and its value evaluated to false; therefore it was not applied
    • Notice that 'some-class' was applied. This function is not limited only to Tailwind classes.

Settings

Member Visibility