tailwind-3

Styling Decision Tree

Aurora form layout? → layout__container + col-* classes Theme colors needed? → bg-primary, text-on-primary, bg-card, etc. Dark mode support? → Use theme utilities (auto) OR dark:* variants Responsive design? → Mobile-first with sm:/md:/lg:/xl: prefixes Custom component style? → @apply in SCSS for reusable patterns One-off styling? → Inline Tailwind classes

Critical Rules

Use Aurora Grid for Forms

<div class="layout__container"> <mat-form-field class="col-6">...</mat-form-field> <mat-form-field class="col-6">...</mat-form-field> <mat-form-field class="col-12">...</mat-form-field> </div>

<div class="grid grid-cols-12 gap-4"> <mat-form-field class="col-span-6">...</mat-form-field> </div>

Use Theme-Aware Utilities

<div class="text-default bg-card">Auto dark mode</div> <div class="bg-primary text-on-primary">Theme colors</div>

<div class="bg-white dark:bg-slate-800">Manual handling</div>

Project Configuration

Key Files

File Purpose

tailwind.config.js

Main Tailwind config

src/@fuse/styles/tailwind.scss

Base styles and layers

src/@aurora/styles/layout.scss

Aurora grid system

src/@aurora/styles/overrides/*.scss

Aurora utilities

src/@fuse/tailwind/plugins/

Custom Fuse plugins

Important Settings

// tailwind.config.js { darkMode: ['selector', '.dark'], // Dark mode via .dark class important: true, // All utilities are !important content: ['./src/**/*.{html,scss,ts}'], }

Aurora Grid Layout System

Column Classes (Responsive)

Class Desktop (md+) Tablet (sm) Mobile

col-1 to col-4

col-span-N col-span-3 col-span-6

col-5 to col-11

col-span-N col-span-6 col-span-12

col-12

col-span-12 col-span-12 col-span-12

Form Layout Examples

<div class="layout__container"> <mat-form-field class="col-6">Name</mat-form-field> <mat-form-field class="col-6">Email</mat-form-field> </div>

<div class="layout__container"> <mat-form-field class="col-4">First Name</mat-form-field> <mat-form-field class="col-4">Last Name</mat-form-field> <mat-form-field class="col-4">Phone</mat-form-field> </div>

<div class="layout__container"> <mat-form-field class="col-8">Address</mat-form-field> <mat-form-field class="col-4">ZIP Code</mat-form-field> <mat-form-field class="col-12">Notes</mat-form-field> </div>

Theme Colors

Primary/Accent/Warn Palettes

<div class="bg-primary text-on-primary">Primary button</div> <div class="bg-primary-500">Primary 500</div> <div class="text-primary-600">Primary text</div> <div class="border-primary">Primary border</div>

<div class="bg-accent text-on-accent">Accent</div>

<div class="bg-warn text-on-warn">Warning</div>

Theme-Aware Semantic Colors

<p class="text-default">Main text color</p> <p class="text-secondary">Secondary/muted text</p> <p class="text-hint">Hint/placeholder text</p> <p class="text-disabled">Disabled state text</p>

<div class="bg-default">Page background</div> <div class="bg-card">Card/surface background</div> <div class="bg-dialog">Dialog background</div> <div class="bg-hover">Hover state background</div>

Theme Switching

<div class="theme-brand">Uses brand palette</div> <div class="theme-teal">Uses teal palette</div> <div class="theme-purple">Uses purple palette</div> <div class="theme-rose">Uses rose palette</div> <div class="theme-amber">Uses amber palette</div>

Dark Mode

How It Works

Dark mode is controlled by .dark class on body (Fuse handles this).

<div class="bg-card">   </div>

<div class="bg-white dark:bg-slate-800"> <p class="text-gray-900 dark:text-white">Content</p> </div>

Dark Mode Patterns

<div class="text-default bg-card border">Card</div> <button class="bg-primary text-on-primary">Button</button>

<div class="bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100"> Custom colors with dark support </div>

Common Patterns

Flexbox

<div class="flex items-center justify-center">...</div>

<div class="flex items-center justify-between">...</div>

<div class="flex items-center gap-4">...</div>

<div class="flex flex-col gap-2">...</div>

<div class="inline-flex items-center gap-2">...</div>

Grid (Non-Form Layouts)

<div class="grid grid-cols-3 gap-4">...</div>

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">...</div>

Spacing

<div class="p-4">All sides</div> <div class="px-4 py-2">Horizontal, vertical</div> <div class="pb-2 pt-4">Top, bottom</div>

<div class="m-4">All sides</div> <div class="mx-auto">Center horizontally</div> <div class="mb-4 mt-8">Top, bottom</div>

<div class="flex gap-4">...</div>

Typography

<h1 class="text-2xl font-bold">Heading</h1> <p class="text-secondary text-sm">Secondary text</p> <span class="text-xs font-medium uppercase tracking-wide">Label</span>

Cards

<div class="bg-card rounded-lg p-6 shadow">...</div>

<div class="bg-card rounded-lg p-6 shadow transition-shadow hover:shadow-lg"> ... </div>

<div class="bg-card rounded-lg border p-6">...</div>

Borders & Shadows

<div class="rounded-lg border">Rounded border</div> <div class="rounded-full shadow-lg">Circle with shadow</div> <div class="ring-2 ring-primary ring-offset-2">Focus ring</div>

States

<button class="hover:bg-primary-600 focus:ring-2 active:scale-95"> Interactive </button> <input class="focus:border-primary focus:outline-none" /> <div class="group-hover:opacity-100">Group hover</div>

Responsive Design

Breakpoints

Prefix Min Width Usage

(none) 0px Mobile first

sm:

600px Small tablets

md:

960px Tablets/laptops

lg:

1280px Desktops

xl:

1440px Large screens

Common Patterns

<div class="flex flex-col sm:flex-row">...</div>

<div class="p-4 sm:p-6 md:p-8">...</div>

<div class="hidden sm:block">Desktop only</div> <div class="sm:hidden">Mobile only</div>

<h1 class="text-2xl sm:text-3xl md:text-4xl">Title</h1>

<div class="w-full md:w-1/2 lg:w-1/3">...</div>

Component Page Layout

Standard Aurora Page Structure

<div class="absolute inset-0 flex w-full flex-col overflow-hidden">  <div class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-4 dark:bg-transparent" > <div class="min-w-0 flex-1"> <au-breadcrumb [data]="breadcrumb"></au-breadcrumb> <au-title> <mat-icon class="mr-2 icon-size-8">settings</mat-icon> Page Title </au-title> </div>

    &#x3C;!-- Actions -->
    &#x3C;div class="mt-6 flex flex-shrink-0 items-center sm:ml-4 sm:mt-0">
        &#x3C;button
            class="ml-3"
            [color]="'primary'"
            mat-flat-button
        >
            &#x3C;mat-icon class="mr-2 icon-size-5">save&#x3C;/mat-icon>
            Save
        &#x3C;/button>
    &#x3C;/div>
&#x3C;/div>

&#x3C;!-- Main Content -->
&#x3C;div class="flex-auto overflow-y-auto px-6 pt-6 sm:px-10 sm:pt-10">
    &#x3C;div class="form-card">
        &#x3C;div class="layout__container">
            &#x3C;!-- Form fields here -->
        &#x3C;/div>
    &#x3C;/div>
&#x3C;/div>

</div>

Fuse Utility Classes

Icon Sizing

<mat-icon class="icon-size-4">icon</mat-icon>  <mat-icon class="icon-size-5">icon</mat-icon>  <mat-icon class="icon-size-6">icon</mat-icon>  <mat-icon class="icon-size-8">icon</mat-icon>  <mat-icon class="icon-size-10">icon</mat-icon>  <mat-icon class="icon-size-12">icon</mat-icon>

Extended Spacing

<div class="w-90">360px width</div> <div class="h-120">480px height</div> <div class="max-w-200">800px max width</div>

Extended Z-Index

<div class="z-60">Above most elements</div> <div class="z-999">Above modals</div> <div class="z-9999">Tooltips, dropdowns</div>

Using @apply in SCSS

Component Styles

// ✅ GOOD: Reusable component styles .form-card { @apply bg-card rounded-lg p-6 shadow; }

.button-primary { @apply rounded bg-primary px-4 py-2 text-on-primary; }

// ✅ GOOD: Custom utilities layer @layer utilities { .truncate-2-lines { @apply line-clamp-2; } }

// ❌ AVOID: @apply for one-off styles // Use inline classes instead

Interpolation for !important

// When needed despite important: true in config .text-forced { @apply text-default #{'!important'}; }

Anti-Patterns

Avoid Do Instead

Raw grid-cols-* in forms Use layout__container

col-*

Hard-coded colors without dark variant Use theme utilities (bg-card , text-default )

!important in HTML classes Tailwind config has important: true

Inline styles for spacing Use Tailwind spacing utilities

@apply for single-use styles Use inline utility classes

Hex colors in arbitrary values Use theme color classes

Related Skills

Skill When to Use Together

angular-19

Angular component patterns

angular-material-19

Material components styling

tailwind-4

When migrating to Tailwind 4

Resources

Tailwind Config: tailwind.config.js
Fuse Plugins: src/@fuse/tailwind/plugins/
Aurora Styles: src/@aurora/styles/
Official Docs: https://v3.tailwindcss.com/docs

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

angular-19

angular-material-19

prettier