tailng — Scalability of Angular. Simplicity of Tailwind.

Angular + Tailwind v0.x

tailng is a Tailwind-first UI kit for Angular — standalone-first, consistent APIs, predictable styling, and a Material-like developer experience without heavy theming overhead.

Quick install

Add tailng to your Angular app:

npm i @tailng-ui/cdk @tailng-ui/theme @tailng-ui/ui

Tailwind-first Signals-friendly Accessible patterns Small public API

tailng

Angular UI kit styled with Tailwind.

Design tokens

CSS vars + utilities

Accessibility

Solid defaults

Preview

Primary Outline Surface

Tailwind-first components

Components ship with sensible defaults and compose cleanly with Tailwind utilities.

Utilities Variants Composable

Standards-based theming

Theme via CSS variables and small tokens. No theme engine lock-in.

CSS variables Design tokens Light / Dark

Signals-friendly APIs

Designed for modern Angular patterns — standalone-first and predictable inputs.

Standalone Signals Modern Angular

Getting started

After install, configure tailng themes, and start using components.

1) Configure

tailwind.config.js


const tailngPreset = require("@tailng-ui/theme/tailwind/tailng.preset.cjs");

module.exports = {
  presets: [tailngPreset],
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/@tailng-ui/ui/**/*.{mjs,js}",
    "./node_modules/@tailng-ui/icons/**/*.{mjs,js}",
  ],
};

2) Update global styles

styles.css


@import "@tailng-ui/theme/tokens/index.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

3) Use a component

Angular


import { Component } from '@angular/core';
import { TngButton } from '@tailng-ui/ui/primitives';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<tng-button>Click me</tng-button>`,
  imports: [TngButton],
})
export class AppComponent {}