Skills

tailwind-3

Installation
SKILL.md

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

<!-- ✅ ALWAYS: Aurora layout system 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>

<!-- ❌ NEVER: Raw Tailwind grid in forms -->
<div class="grid grid-cols-12 gap-4">
    <mat-form-field class="col-span-6">...</mat-form-field>
</div>

Use Theme-Aware Utilities

<!-- ✅ ALWAYS: Theme utilities (auto dark mode) -->
<div class="text-default bg-card">Auto dark mode</div>
<div class="bg-primary text-on-primary">Theme colors</div>

<!-- ⚠️ CAUTION: Manual colors need dark variants -->
<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

<!-- 2-column form -->
<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>

<!-- 3-column form -->
<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>

<!-- Mixed columns -->
<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

<!-- Primary (indigo by default) -->
<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>

<!-- Accent (slate by default) -->
<div class="bg-accent text-on-accent">Accent</div>

<!-- Warn (red by default) -->
<div class="bg-warn text-on-warn">Warning</div>

Theme-Aware Semantic Colors

<!-- Text 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>

<!-- Background colors -->
<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

<!-- Apply theme to container -->
<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).

<!-- Automatic: Theme utilities handle dark mode -->
<div class="bg-card">
    <!-- Light: white background -->
    <!-- Dark: slate-800 background -->
</div>

<!-- Manual: When using non-theme colors -->
<div class="bg-white dark:bg-slate-800">
    <p class="text-gray-900 dark:text-white">Content</p>
</div>

Dark Mode Patterns

<!-- ✅ PREFERRED: Theme-aware utilities -->
<div class="text-default bg-card border">Card</div>
<button class="bg-primary text-on-primary">Button</button>

<!-- ⚠️ WHEN NEEDED: Manual dark variants -->
<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

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

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

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

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

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

Grid (Non-Form Layouts)

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

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

Spacing

<!-- Padding -->
<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>

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

<!-- Gap (flexbox/grid) -->
<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

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

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

<!-- Card with border -->
<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

<!-- Stack on mobile, row on desktop -->
<div class="flex flex-col sm:flex-row">...</div>

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

<!-- Show/hide by breakpoint -->
<div class="hidden sm:block">Desktop only</div>
<div class="sm:hidden">Mobile only</div>

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

<!-- Responsive width -->
<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">
    <!-- Header -->
    <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>

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

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

Fuse Utility Classes

Icon Sizing

<mat-icon class="icon-size-4">icon</mat-icon>
<!-- 1rem -->
<mat-icon class="icon-size-5">icon</mat-icon>
<!-- 1.25rem -->
<mat-icon class="icon-size-6">icon</mat-icon>
<!-- 1.5rem -->
<mat-icon class="icon-size-8">icon</mat-icon>
<!-- 2rem -->
<mat-icon class="icon-size-10">icon</mat-icon>
<!-- 2.5rem -->
<mat-icon class="icon-size-12">icon</mat-icon>
<!-- 3rem -->

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
Related skills

More from avvale/aurora-front

Installs
5
Repository
avvale/aurora-front
First Seen
Feb 28, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass