ngx-classed library allows you to dynamically add or remove classes based on state. It especially perfectly suits frameworks like Tailwind where you have utility classes and need to apply them based on some states.
✨ Key Features:
- 🔒 Type-safe: Full TypeScript support
- ⚡ Angular Signals: Built on Angular's reactive computed signals
- 🎨 Variant-based: Define multiple styling variants with ease
- 🧩 Compound Variants: Handle complex styling combinations
- 🧠 TailwindCSS IntelliSense: Full IDE support with autocomplete and syntax highlighting
- 🌐 SSR Compatible: Works seamlessly with server-side rendering
- 📦 Zero Dependencies: Lightweight with no external dependencies
supports >= Angular@17
npm install ngx-classedIf you use TailwindCSS, you can enable IntelliSense for better developer experience:
Add this configuration to your .vscode/settings.json:
{
"tailwindCSS.classFunctions": ["classed"]
}Available for WebStorm 2023.1 and later
- Open Settings → Languages and Frameworks → Style Sheets → Tailwind CSS
- Add the following to your Tailwind configuration:
{
"classFunctions": ["classed"]
}Use classed function to configure set of classes, depending on different variants:
import { classed } from 'ngx-classed';
const buttonClassed = classed({
base: 'px-4 py-2 rounded font-medium', // Base classes that will be applied always
variants: {
// Variant based configuration
variant: {
primary: 'bg-blue-500 text-white',
secondary: 'bg-gray-200 text-gray-900',
},
size: {
sm: 'text-sm px-2 py-1',
lg: 'text-lg px-6 py-3',
},
},
compoundVariants: [
// Compount based configuration (all variants must match)
{
variant: 'primary',
size: 'sm',
className: 'hover:bg-blue-100',
},
{
variant: 'secondary',
size: 'lg',
className: 'shadow-red-100',
},
],
});It will return a callable function that expects to pass the object with variants [key, values] that you described. The function returns a computed signal that will automatically trigger on any change of the state:
@Component({
template: `<button [class]="buttonClass()">Click me</button>`,
})
export class MyComponent {
variant = input<'primary' | 'secondary'>('primary');
size = input<'sm' | 'lg'>('sm');
buttonClass = buttonClassed(() => ({
variant: this.variant(),
size: this.size(),
}));
}import { Component, input } from '@angular/core';
import { classed } from 'ngx-classed';
@Component({
selector: 'app-button',
template: `<button [class]="buttonClass()"><ng-content></ng-content></button>`,
})
export class ButtonComponent {
variant = input<'primary' | 'secondary'>('primary');
size = input<'sm' | 'md' | 'lg'>('md');
private buttonClassed = classed({
base: 'font-medium rounded-lg transition-colors',
variants: {
variant: {
primary: 'bg-blue-600 text-white hover:bg-blue-700',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
},
size: {
sm: 'px-3 py-1.5 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-6 py-3 text-lg',
},
},
});
buttonClass = this.buttonClassed(() => ({
variant: this.variant(),
size: this.size(),
}));
}import { Component, input } from '@angular/core';
import { classed } from 'ngx-classed';
@Component({
selector: 'app-card',
template: `
<div [class]="cardClass()">
<h3 [class]="titleClass()">{{ title() }}</h3>
<p>{{ content() }}</p>
</div>
`,
})
export class CardComponent {
title = input<string>('');
content = input<string>('');
variant = input<'default' | 'primary' | 'danger'>('default');
elevated = input<boolean>(false);
interactive = input<boolean>(false);
private cardClassed = classed({
base: 'rounded-lg p-6 border transition-all',
variants: {
variant: {
default: 'bg-white border-gray-200',
primary: 'bg-blue-50 border-blue-200',
danger: 'bg-red-50 border-red-200',
},
elevated: {
true: 'shadow-lg',
false: 'shadow-sm',
},
interactive: {
true: 'cursor-pointer hover:shadow-xl',
false: '',
},
},
compoundVariants: [
{
variant: 'primary',
interactive: true,
className: 'hover:bg-blue-100',
},
{
variant: 'danger',
elevated: true,
className: 'shadow-red-100',
},
],
});
private titleClassed = classed({
base: 'text-xl font-semibold mb-2',
variants: {
variant: {
default: 'text-gray-900',
primary: 'text-blue-900',
danger: 'text-red-900',
},
},
});
cardClass = this.cardClassed(() => ({
variant: this.variant(),
elevated: this.elevated(),
interactive: this.interactive(),
}));
titleClass = this.titleClassed(() => ({
variant: this.variant(),
}));
}// shared/button.styles.ts
import { classed } from 'ngx-classed';
export const buttonClassed = classed({
base: 'inline-flex items-center justify-center font-medium rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
variants: {
variant: {
primary: 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500',
secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-indigo-500',
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
},
size: {
xs: 'px-2.5 py-1.5 text-xs',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-sm',
lg: 'px-4 py-2 text-base',
xl: 'px-6 py-3 text-base',
},
disabled: {
true: 'opacity-50 cursor-not-allowed',
false: '',
},
},
compoundVariants: [
{
variant: 'primary',
disabled: true,
className: 'bg-gray-400 hover:bg-gray-400',
},
],
});
// Usage in components
@Component({
selector: 'save-button',
template: `<button [class]="buttonClass()" (click)="onSave()">Save</button>`,
})
export class SaveButtonComponent {
loading = input<boolean>(false);
buttonClass = buttonClassed(() => ({
variant: 'primary' as const,
size: 'md' as const,
disabled: this.loading(),
}));
onSave() {
// Save logic
}
}This library draws inspiration from CVA (Class Variance Authority) 🎨, bringing similar variant-based styling patterns to the Angular ecosystem with full integration into Angular's reactive system.
MIT
Built with ❤️ for the Angular community