Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7

Tailwind Setup

Set up TailNG Components with Tailwind utilities while keeping semantic design tokens.

Getting Started

Tailwind Setup

Integrate TailNG Components with utility-first styling in Tailwind.

1. Install TailNG + Tailwind

Install TailNG packages and Tailwind toolchain using your package manager.

pnpm

bash
## TailNG packages
pnpm add @tailng-ui/components @tailng-ui/primitives @tailng-ui/cdk @tailng-ui/theme @tailng-ui/icons
## Tailwind CSS
pnpm add -D tailwindcss postcss autoprefixer

2. Register TailNG theme provider

Add the provider once in your app config.

Configure app providers

ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { defaultDarkThemePreset, provideTailngTheme } from '@tailng-ui/theme';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideTailngTheme({ theme: defaultDarkThemePreset }),
  ],
};

3. Configure Tailwind content scanning

Ensure Tailwind scans Angular templates and component files.

tailwind.config.ts

ts
import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{html,ts}'],
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      colors: {
        brand: 'var(--tng-semantic-accent-brand)',
      },
    },
  },
  plugins: [],
} satisfies Config;

4. Import Tailwind layers and TailNG contracts

Keep Tailwind utilities and TailNG semantic contracts in your global styles.

styles.css

css
/* src/styles.css */
@layer tw.preflight, components, tng.tokens, tng.contracts, utilities;
@import "./tailwind-preflight.layer.css";
@tailwind components;
@tailwind utilities;

@import '@tailng-ui/theme/component-contracts/index.css';

:root {
  --tng-semantic-background-canvas: #f8fafc;
  --tng-semantic-background-surface: #ffffff;
  --tng-semantic-foreground-primary: #0f172a;
  --tng-semantic-border-subtle: #cbd5e1;
  --tng-semantic-accent-brand: #2563eb;
  --tng-semantic-focus-ring: rgba(37, 99, 235, 0.35);
}

5. Compose TailNG with utility classes

Use Tailwind for layout/spacing and TailNG for behavior + accessibility primitives.

Angular template example

html
<section class="grid gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <h2 class="m-0 text-sm font-semibold text-slate-900">Tailwind + TailNG</h2>

  <tng-input
    type="text"
    placeholder="tailng-app"
    ariaLabel="Workspace name"
  ></tng-input>

  <div class="[--tng-semantic-accent-brand:#0f766e]">
    <tng-button class="w-fit">Create workspace</tng-button>
  </div>
</section>