Tailwind Patterns

Triggers

Load this skill when: configuring Tailwind v4, writing Angular templates with utility classes, migrating from Tailwind v3, implementing dark mode with daisyUI, or designing container-query-based layouts.

Iron Law

NO TAILWIND STYLING WITHOUT CHECKING THE PROJECT'S @theme CONFIGURATION FIRST — read the global CSS theme file before applying utility classes

Load the project's CSS @theme configuration and verify daisyUI semantic tokens before writing any template classes.

Tailwind CSS Patterns (v4 - 2025)

Modern utility-first CSS with CSS-native configuration.

When to Use

Use this skill when configuring Tailwind v4, using CSS-first theme and design tokens, implementing container queries, or applying modern Tailwind patterns in Angular 21.x templates.

1. Tailwind v4 Architecture

What Changed from v3

v4 Core Concepts

2. CSS-Based Configuration

Theme Definition

@theme {
  /* Colors - use semantic names */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);

  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

When to Extend vs Override

3. Container Queries (v4 Native)

Breakpoint vs Container

Container Query Usage

Angular Example

<!-- Angular component template -->
<div class="@container">
  <div class="card @sm:card-side @lg:grid @lg:grid-cols-2">
    <!-- Responds to parent width, not viewport -->
    <!-- Use when same component appears in sidebar AND full-width page -->
  </div>
</div>

When to Use

4. Responsive Design

Breakpoint System

Mobile-First Principle

1. Write mobile styles first (no prefix)
2. Add larger screen overrides with prefixes
3. Example: w-full md:w-1/2 lg:w-1/3

5. Dark Mode

Configuration Strategies

daisyUI Dark Mode (Angular Workspace Standard)

// theme.service.ts — daisyUI approach (workspace standard)
@Injectable({ providedIn: 'root' })
export class ThemeService {
  setTheme(theme: 'light' | 'dark'): void {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }
}

<!-- All daisyUI semantic classes switch automatically — no per-component CSS needed -->
<div class="bg-base-100 text-base-content">
  <!-- bg-base-100 is white in light, dark in dark theme automatically -->
</div>

Raw Tailwind Dark Mode Pattern (non-daisyUI)

6. Modern Layout Patterns

Flexbox Patterns

Grid Patterns

Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.

7. Modern Color System

OKLCH vs RGB/HSL

OKLCH for daisyUI Custom Themes

/* Custom daisyUI theme using OKLCH — produces better hover gradients */
@plugin "daisyui" {
  themes: [{
    mytheme: {
      "primary": "oklch(0.65 0.20 280)",   /* Brand purple */
      "secondary": "oklch(0.70 0.15 200)", /* Teal */
      "accent": "oklch(0.75 0.18 160)",
      "base-100": "oklch(0.98 0 0)",
      "base-content": "oklch(0.20 0 0)",
    }
  }]
}

Color Token Architecture

In Angular: use daisyUI semantic classes (bg-primary, text-base-content) — never primitives directly.

8. Typography System

Font Stack Pattern

Type Scale

9. Animation & Transitions

Built-in Animations

Transition Patterns

10. Component Extraction

When to Extract

Extraction Methods

11. Anti-Patterns

12. Performance Principles

Related Skills

• angular-spa — Angular 21.x implementation with full daisyUI v5.5.5 and Tailwind v4 reference files
• angular-best-practices — OnPush, Signals, bundle optimization, @defer
• design-system — token enforcement (Angular + Flutter)
• web-performance-optimization — bundle size, CSS purging, LCP

Additional Resources

• Tailwind CSS v4 Docs
• daisyUI v5 Theming
• Container Queries MDN
• OKLCH Color Tool

Verify Step

Before delivering any Tailwind changes:

1. Confirm no tailwind.config.js was created — v4 uses @theme {} in CSS only
2. Grep changed templates: grep -n "bg-blue-\|text-blue-\|bg-red-" <file> — zero raw primitive colors in Angular templates
3. Grep for arbitrary values: grep -c "\[" <file> — minimize; each must be justified
4. Confirm dark mode uses data-theme attribute swap (daisyUI), not dark: prefixes, unless project explicitly uses raw Tailwind dark mode
5. Run ng build to confirm the Oxide compiler picks up all classes (no purged classes)

Remember: Tailwind v4 is CSS-first. Use @theme {} not tailwind.config.js. Use daisyUI semantic tokens in Angular templates — never raw Tailwind primitives like bg-blue-500.