https://github.com/5tarlight/cn
React (especially Tailwind) classname utility
https://github.com/5tarlight/cn
classname react tailwindcss
Last synced: about 1 month ago
JSON representation
React (especially Tailwind) classname utility
- Host: GitHub
- URL: https://github.com/5tarlight/cn
- Owner: 5tarlight
- License: mit
- Created: 2024-10-07T15:58:35.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-23T05:44:18.000Z (8 months ago)
- Last Synced: 2025-05-01T12:22:57.483Z (about 2 months ago)
- Topics: classname, react, tailwindcss
- Language: Shell
- Homepage: https://www.npmjs.com/package/@yeahx4/cn
- Size: 7.81 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @yeahx4/cn
`@yeahx4/cn` is a lightweight utility to easily combine class names in your React projects. It helps prevent excessively long or redundant class names, particularly useful when using libraries like Tailwind CSS.
## Why use @yeahx4/cn?
When working with Tailwind CSS, class names can get very long and repetitive. `@yeahx4/cn` simplifies this by allowing you to conditionally include class names, ensuring that only valid class names are included in the final output.
## Installation
You can install this package via npm:
```bash
npm install @yeahx4/cn
```
or via yarn:
```bash
yarn add @yeahx4/cn
```
## Usage
Here’s a basic example of how to use @yeahx4/cn:
```tsx
import cn from '@yeahx4/cn';
return (
Click me
);
```
In this example:
- The cn function combines the class names.
- Conditional class names like active and disabled are only included if their corresponding conditions (isActive and disabled) are true.
## Benefits
- Simplifies managing multiple class names in Tailwind CSS.
- Automatically filters out undefined or false values.
- Helps make your JSX cleaner and more readable.