Scalability of Angular. Simplicity of Tailwind.

tailng is a Tailwind-first component library for Angular — built for modern Angular apps (standalone-first) with clean APIs, consistent styling, and a “Material-like” developer experience without heavy theming overhead.

Tailwind-firstAngular-readyAccessible patternsDeveloper friendly

View on GitHub

Prefer guides first? Installation

tailng

A modern Angular UI kit, styled with Tailwind.

Theme

Primary: #12284b

Style

Minimal, clean, consistent

Focus

Components + docs + demos

Theming supported

CSS vars

tailng supports theming via CSS variables and Tailwind classes. Customize colors, radius, and surface styles to match your product without fighting component internals.

CSS variablesTailwind classesLight & dark

Example

:root {
  --primary: #12284b;
  --radius: 6px;
  --surface: #ffffff;
  --surface-2: #f8fafc;
}

/* Example usage */
.button-primary {
  background: var(--primary);
  border-radius: var(--radius);
}

Preview

Primary Surface Outline

“klass signal” pattern

tailng pattern

tailng components often expose a single klass signal that composes the final Tailwind class string from inputs/state. This keeps templates clean, enables consistent styling, and makes variants predictable.

Signals-firstTailwind compositionSmall public API

Rendered output idea

[class]="klass()" -> stable + predictable Tailwind classes

Example implementation

import { Component, computed, input } from '@angular/core';

@Component({
  standalone: true,
  selector: 'tng-example-button',
  template: `
    <button type="button" class="px-3 py-2 text-sm font-semibold" [class]="klass()">
      <ng-content />
    </button>
  `,
})
export class ExampleButtonComponent {
  variant = input<'primary' | 'outline'>('primary');
  disabled = input(false);

  klass = computed(() => {
    const base = 'rounded-md transition';
    const primary = 'bg-[color:var(--primary)] text-white hover:opacity-95';
    const outline = 'border border-slate-200 text-slate-800 hover:bg-slate-50';
    const disabled = 'opacity-50 pointer-events-none';

    return [
      base,
      this.variant() === 'primary' ? primary : outline,
      this.disabled() ? disabled : '',
    ].filter(Boolean).join(' ');
  });
}

Example usage

<tng-example-button variant="primary">Save</tng-example-button>
<tng-example-button variant="outline">Cancel</tng-example-button>
<tng-example-button variant="primary" [disabled]="true">Disabled</tng-example-button>

GitHub

Open source

Source code, issues, roadmap, and contributions.

https://github.com/tociva/tailng

npm

Package

Install and use the component library in your Angular apps.

Install

npm i @tociva/tailng-ui

https://www.npmjs.com/package/@tociva/tailng-ui

Demo

Playground

Explore components, examples, and usage docs.

https://tailng.dev

Quick start

            import { TailngChipsComponent } from '@tociva/tailng-ui';

Open source

tailng is an open-source project. Contributions are welcome — issues, PRs, docs, and components.

Community drivenMIT-friendlyDocs + demos

Developed & maintained by Tociva

Built and maintained by Tociva — focused on clean developer tooling and scalable UI systems.

https://tociva.com

GitHub npm Demo Tociva