The cn helper function is a utility that combines the power of the clsx and tailwind-merge libraries, providing a seamless way to merge class names in a Tailwind CSS project.


Make sure you are importing the useBoolean hook from the pol-ui library in your React component.

import { cn } from "pol-ui";


Import the cn helper function in your project and use it to merge class names:

import { cn } from 'pol-ui';
// Your component code goes here
const combinedClasses = cn('bg-blue-500', 'text-white', { 'font-bold': true }, 'custom-class');
// Your component UI goes here with the combined classes
// Example usage in a React component
function MyComponent() {
  return (
    <div className={combinedClasses}>
      <p>Hello, Tailwind CSS!</p>


The cn helper function accepts an unlimited number of parameters, where each parameter is a class name or an object of class names. It uses clsx and tailwind-merge internally to merge and process the class names.

  • ...inputs (ClassValue[]): The class names to be merged. These can be strings, objects, or arrays of class names.


import { cn } from "pol-ui";
const buttonClasses = cn(
  { "font-bold": true },
  ["p-2", "rounded-md"],
  { "hover:bg-blue-700": true, "focus:outline-none": true }
// Example usage in a React component
function MyButton() {
  return (
      onClick={() => console.log("Button clicked")}
      Click Me

In this example, the cn function is used to combine multiple class names, including Tailwind CSS classes and conditional classes based on object properties.


  • The cn helper function simplifies the process of merging class names in a Tailwind CSS project.
  • It supports various inputs, including strings, objects, and arrays of class names.
  • You can easily extend and customize the utility function based on your project's needs.

Since March 1, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores