Tailwind Setup

Install and configure Tailwind CSS for tailng.

Important

tailng is built on Tailwind CSS. These steps are required for tailng styles to compile.

1) Install Tailwind dependencies

Install Tailwind, PostCSS, and Autoprefixer.

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init

2) Add PostCSS config

Create postcss.config.js (or .cjs) at workspace root.

/** @type {import('postcss-load-config').Config} */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3) Configure Tailwind for tailng

Create tailwind.config.ts at workspace root.

import type { Config } from 'tailwindcss';

// tailng preset (recommended)
import tailngPreset from '@tailng-ui/theme/tailwind/tailng.preset';

// optional: tailng plugin (enable if your package exports it)
// import tailngPlugin from '@tailng-ui/theme/tailwind/tailng.plugin';

export default {
  content: [
    './src/**/*.{html,ts}',
    // If you're using Nx workspace libs:
    './libs/**/*.{html,ts}',
    // If you want scanning inside tailng packages:
    './node_modules/@tailng-ui/**/*.{html,ts,js,mjs}',
  ],
  presets: [tailngPreset],
  theme: {
    extend: {},
  },
  plugins: [
    // tailngPlugin,
  ],
} satisfies Config;

Tip

Keep your content list accurate — missing paths will cause styles not to appear.

4) Global styles

Add these directives to src/styles.css (or styles.scss).

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

/* tailng theme tokens (recommended) */
@import '@tailng-ui/theme/css/tailng.css';

5) Ensure Angular includes your global styles

Confirm styles includes your stylesheet.

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": ["src/styles.css"]
          }
        }
      }
    }
  }
}

6) Theme modes (optional)

Set mode + theme class on body.

<body class="mode-light theme-default">
  <app-root></app-root>
</body>

<!-- dark mode -->
<body class="mode-dark theme-default">
  <app-root></app-root>
</body>

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

7) Verify setup

Add a quick class in any template and confirm it renders.

<div class="p-4 rounded-md bg-primary text-white">
  Tailwind + tailng is working
</div>

yarn start