https://github.com/mh-jsx/tw-classnames
A lightweight utility function that simplifies the process of merging Tailwind Classes
https://github.com/mh-jsx/tw-classnames
classname classnames javascript javascript-library merge npm npm-package tailwind tailwind-css tailwindcss utilities utility
Last synced: about 2 months ago
JSON representation
A lightweight utility function that simplifies the process of merging Tailwind Classes
- Host: GitHub
- URL: https://github.com/mh-jsx/tw-classnames
- Owner: mh-jsx
- Created: 2023-10-20T11:09:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-23T05:17:07.000Z (over 2 years ago)
- Last Synced: 2025-03-27T09:04:14.862Z (over 1 year ago)
- Topics: classname, classnames, javascript, javascript-library, merge, npm, npm-package, tailwind, tailwind-css, tailwindcss, utilities, utility
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tw-classnames
- Size: 11.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tailwind Classnames
  
`twc` aka tw-classnames is a lightweight utility function that simplifies the process of merging Tailwind Classes while also supporting conditional classes within objects.
## Installation
You can install `twc` via npm or yarn:
```bash
npm install tw-classnames
# OR
yarn add tw-classnames
```
## Usage
Import twc into your JavaScript or TypeScript code:
```javascript
const twc = require('tw-classnames');
// OR
import twc from 'tw-classnames';
```
## Merging Duplicate Classnames
twc allows you to smartly merge duplicate Tailwind classes.
````javascript
const mergedClasses = twc('bg-blue', 'text-white', 'p-4', 'bg-green');
console.log(mergedClasses);
// Output: 'text-white p-4 bg-green'
````
## Conditional Classes
twc supports conditional classes within objects. This is especially useful when you want to apply different classes based on certain conditions.
````javascript
const isActive = true;
const classes = twc('bg-blue-500', 'text-white', { 'font-bold': isActive });
console.log(classes);
// Output: 'bg-blue-500 text-white font-bold'
````
### Dependency Libraries
`twc` internally uses two popular libraries:
- [clsx](https://www.npmjs.com/package/clsx) for object merging.
- [tailwind-merge](https://www.npmjs.com/package/tailwind-merge) to merge Tailwind classes intelligently.
## License
`twc` is open-source and released under the [MIT License](LICENSE).