https://github.com/imkkingshuk/classifyx
ClassifyX: Your Ultimate Style Utility! Effortlessly generate dynamic classes, create and manage variants, merge classes, and apply conditional styles. With full TypeScript support and seamless integration with Tailwind CSS and other frameworks, streamline your styling workflow! 💻 🚀
https://github.com/imkkingshuk/classifyx
class-variance-authority classifyx classname-to-css classname-variants classnames clsx css-class-manager css-class-manipulation css-framework css-in-ts css-utility dynamic-classname tailwind-merge tailwind-variants tailwindcss-merge tailwindcss-plugin typescript-utility
Last synced: 4 months ago
JSON representation
ClassifyX: Your Ultimate Style Utility! Effortlessly generate dynamic classes, create and manage variants, merge classes, and apply conditional styles. With full TypeScript support and seamless integration with Tailwind CSS and other frameworks, streamline your styling workflow! 💻 🚀
- Host: GitHub
- URL: https://github.com/imkkingshuk/classifyx
- Owner: ImKKingshuk
- License: gpl-3.0
- Created: 2024-11-14T20:13:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-30T06:47:34.000Z (9 months ago)
- Last Synced: 2025-09-30T08:37:45.592Z (9 months ago)
- Topics: class-variance-authority, classifyx, classname-to-css, classname-variants, classnames, clsx, css-class-manager, css-class-manipulation, css-framework, css-in-ts, css-utility, dynamic-classname, tailwind-merge, tailwind-variants, tailwindcss-merge, tailwindcss-plugin, typescript-utility
- Language: TypeScript
- Homepage:
- Size: 250 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ClassifyX
ClassifyX: Your Ultimate Style Utility! Effortlessly generate dynamic classes, create and manage variants, merge classes, and apply conditional styles. With full TypeScript support and seamless integration with Tailwind CSS and other frameworks, streamline your styling workflow! 💻 🚀
## Features
- **Dynamic Class Generation**: Generate class names dynamically based on conditions, values, and configurations. This allows for flexible and powerful styling logic that adapts to different use cases.
- **Variant-Based Styling**: Support for defining styling variants, enabling dynamic styling based on different variant properties. You can define default variants and apply them with the flexibility of using variant-specific properties.
- **Class Merging**: Automatically merge classes with a built-in conflict resolution mechanism. This ensures that multiple class names, including those with Tailwind CSS, are merged efficiently, removing duplicate classes and resolving conflicting styles.
- **Conditional Classes**: Apply classes conditionally based on boolean values or dynamic properties. This allows you to toggle styles without the need for complex logic.
- **Additional Classes Support**: You can pass additional classes as arguments, making it easy to extend the base and variant classes with extra styling without any hassle.
- **CSS Module Integration**: Seamlessly integrate with CSS Modules, allowing you to use scoped styles in modular fashion, while still benefiting from the dynamic class generation and merging features.
- **TypeScript Support**: Fully typed, offering enhanced developer experience with improved code completion, type safety, and error checking in TypeScript environments.
- **Server-Side Rendering (SSR) Compatibility**: Designed to work well with server-side rendering environments, ensuring that class names are generated and handled correctly during the SSR process.
- **Inline Boolean Expressions**: Easily include class names based on inline boolean expressions, enabling simple and concise syntax for conditional styling.
## Installation
Install `ClassifyX` using your preferred package manager:
### bun
```bash
bun add classifyx
```
### npm
```bash
npm install classifyx
```
### pnpm
```bash
pnpm add classifyx
```
### yarn
```bash
yarn add classifyx
```
## API Reference
### `cfx(baseStyles, variantsConfigOrClassName?, variantProps?, ...additionalClasses)`
| Parameter | Type | Description |
| --------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `baseStyles` | `string \| ClassValue` | Base class or classes to apply. |
| `variantsConfigOrClassName` | `Record \| ClassValue` | Variant configuration object or additional class name(s). |
| `variantProps` | `VariantProps` | Variant properties for applying conditional variant-based styles. A configuration object for managing dynamic styling based on variants. |
| `additionalClasses` | `ClassValue[]` | Additional class names to merge and apply conditionally. |
## Usage
### Basic Class Merging
```jsx
import { cfx } from 'classifyx';
const Button = ({ isActive }) => (
{isActive ? 'Active' : 'Inactive'}
);
```
---
### Variants: Dynamic Styling Example
#### Define a Component with Variants
```jsx
import { cfx } from 'classifyx';
const AlertBox = ({ type }) => (
This is a {type} alert!
);
```
#### Example
```jsx
{/* Defaults to 'success' */}
```
---
### Combining Base Styles, Variants, and Additional Classes
```jsx
const Card = ({ isSelected, size }) => (
Card Content
);
```
#### Example
```jsx
{/* small and not selected by default */}
```
---
### Conditional Class Merging
```jsx
const NavItem = ({ isActive }) => (
{isActive ? 'Active' : 'Inactive'}
);
```
---
### Merging Tailwind CSS Classes with Conflict Resolution
```jsx
const ProfilePic = ({ isRounded }) => (
);
```
---
### Complex Variant-Based Styling with Custom Properties
```jsx
const Badge = ({ type, size, isOutlined }) => (
Badge
);
```
#### Usage
```jsx
```
---
### Dynamic Class Names for Lists
```jsx
const TaskList = ({ tasks }) => (
-
{task.name}
{tasks.map((task) => (
))}
);
```
---
### Inline Boolean Expressions for Conditional Styles
```jsx
const Button = ({ disabled }) => (
Click Me
);
```
## License
This project is licensed under the GPL-3.0-or-later License.