Installation

Install tailng and get started quickly.

1) Create a fresh Angular 21 app

npx -p @angular/cli@21 ng new tailng-starter --standalone --routing --style=css
cd tailng-starter

2) Install Angular CDK

yarn add @angular/cdk

3) Install Tailng packages

yarn add @tailng-ui/cdk @tailng-ui/theme @tailng-ui/icons @ng-icons/core @tailng-ui/ui

4) Install Tailwind CSS

yarn add -D tailwindcss@^3.4 postcss autoprefixer
npx tailwindcss init

5) Add PostCSS config

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

6) Configure Tailwind for Tailng

// 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}",
  ],
};

7) Global styles

/* src/styles.css */
@import "@tailng-ui/theme/tokens/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

8) Run the app

yarn start

Theme modes

Set mode + theme class on body.

<body class="mode-dark theme-emerald">

Modes: mode-light, mode-dark
Themes: theme-default, theme-slate, theme-indigo, theme-emerald, theme-rose