A Utility for Merging Tailwind CSS Classes, Made for personal use, you can use it if you want to.
clsx-for-tailwind
- A Utility for Merging Tailwind CSS Classesclsx-for-tailwind
is a lightweight utility function for merging Tailwind CSS classes with conditional class names. It combines the power of clsx
and tailwind-merge
to provide an easy way to manage your CSS class names in a dynamic and maintainable way.
To install the package, use npm or yarn:
npm install clsx-for-tailwind
or
yarn add clsx-for-tailwind
Import the cn
function and use it to combine your class names:
import { cn } from "clsx-for-tailwind";
const buttonClass = cn("btn", "btn-primary", {
"btn-large": isLarge,
"btn-disabled": isDisabled,
});
return <button className={buttonClass}>Click Me</button>;
This example demonstrates how to conditionally add btn-large
and btn-disabled
classes based on the values of isLarge
and isDisabled
variables.
cn(...inputs: ClassValue[]): string
import { cn } from "clsx-for-tailwind";
const classes = cn(
"p-4",
"text-center",
{ "bg-blue-500": isActive, "text-white": isActive },
["rounded", "shadow-md"]
);
console.log(classes); // Outputs: "p-4 text-center bg-blue-500 text-white rounded shadow-md"
To contribute to this package or modify it locally, follow these steps:
git clone https://github.com/VishwaGauravIn/clsx-for-tailwind.git
cd clsx-for-tailwind
npm install
npm run build
npm test
This project is licensed under the AGPL-3.0 License. See the LICENSE file for more details.
This package relies on the fantastic work of the following libraries:
clsx
- A tiny utility for constructing className
strings conditionally.tailwind-merge
- A utility for merging Tailwind CSS class names.Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
For any questions or support, please open an issue on the GitHub repository.