---
title: "Tailwind CSS 4.3 with Angular"
chapter: "11"
---

# 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:

```css
@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.