Tailwind CSS 4.3 with Angular

Tailwind is a utility-first CSS engine. Version 4 uses CSS-first configuration, modern CSS features, and dedicated integration packages.

Angular setup

Install compatible Tailwind and PostCSS packages, configure @tailwindcss/postcss, and import Tailwind:

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.22 25);
  --breakpoint-3xl: 120rem;
}

Tailwind 4.3 includes scrollbar utilities, additional logical properties, container-size, zoom, tab-size, and improved variants.

Source detection

Tailwind scans source text for complete class tokens. Runtime-built fragments such as 'bg-' + color + '-500' are invisible. Map variants to complete static strings or safelist only a constrained, justified set.

Design tokens

Define semantic tokens—surface, text, border, action, danger—not arbitrary component colors everywhere. Components consume the token system through utilities or CSS variables.

@apply

Use @apply sparingly for stable repeated primitives or third-party integration. It can hide utility composition and create CSS coupling. Angular components can share semantic primitives without rebuilding Bootstrap-like class hierarchies.

Responsive and logical layout

Start mobile-first. Use container queries when a component responds to its available space rather than viewport. Prefer logical properties for RTL and writing-mode resilience.

Migration traps

Tailwind v4 moves PostCSS integration to @tailwindcss/postcss, configuration into CSS, and performs stricter utility validation. Unknown custom utilities usually mean missing theme mapping—not a warning to suppress.

Feynman check

Tailwind generates CSS from class tokens it can find. It does not understand your Angular variables. Explain how every dynamic visual variant reaches the generated stylesheet.