Skip to content

Tailwind CSS v4 Integration

If you are using Tailwind CSS v4, you can map your themes.css variables directly to Tailwind design tokens. This gives you clean, theme-aware utility classes that update automatically — no dark: prefix needed.

Recommended approach

1. Define your CSS variables

Ensure your themes are defined in src/themes.css. This file is managed by ngx-theme-stack:

:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --card-bg: #f3f4f6;
}

[data-theme='dark'] {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
  --card-bg: #1e293b;
}

2. Map semantic variables

In your src/styles.css, expose your theme variables as Tailwind tokens:

@import 'tailwindcss';

@theme {
  --color-main-bg: var(--bg-color);
  --color-main-text: var(--text-color);
  --color-card-bg: var(--card-bg);
}

3. Use in components

<div class="bg-main-bg text-main-text shadow-xl">
  <!-- automatically reflects the active theme (dark, light, sunset, etc.) -->
</div>

Optional: enable the `dark:` prefix

Only needed if you want to use dark: utilities tied to ngx-theme-stack’s toggle (e.g. dark:bg-black).

@import 'tailwindcss';

/* Class mode */
@custom-variant dark (&:where(.dark, .dark *));

/* Attribute mode */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));