ngx-classed
A TypeScript library for dynamically managing CSS classes in Angular based on state, with TailwindCSS IntelliSense support.
Overview
ngx-classed is a library that enables dynamic addition or removal of CSS classes based on component state in Angular applications. It is particularly well-suited for utility-first CSS frameworks like TailwindCSS, where classes need to be applied conditionally based on various states. The library integrates seamlessly with Angular's reactive system, providing a type-safe and declarative approach to styling.
Key Features
- Type-safe — Full TypeScript support ensures compile-time safety for class definitions.
- Angular Signals — Built on Angular's reactive computed signals for automatic updates.
- Variant-based — Define multiple styling variants (e.g., size, color) with ease.
- Compound Variants — Handle complex styling combinations when multiple variant conditions are met.
- TailwindCSS IntelliSense — Full IDE support with autocomplete and syntax highlighting in editors like VSCode and WebStorm.
- SSR Compatible — Works seamlessly with server-side rendering.
- Zero Dependencies — Lightweight with no external dependencies.
Philosophy
ngx-classed brings variant-based styling patterns from libraries like CVA (Class Variance Authority) to the Angular ecosystem, emphasizing type safety, reactivity, and developer experience.
Related Projects
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
