tailwind-3_skill

Overview

This skill provides Tailwind CSS 3 patterns tailored for Aurora Angular projects with Fuse theming integration. It documents layout conventions, theme-aware utilities, dark-mode handling, responsive rules, and SCSS @apply recommendations so teams can style components consistently. Use it as a concise reference while writing templates, utility classes, and theme configuration in Aurora projects.

How this skill works

The skill inspects common UI scenarios (forms, cards, page structure, responsive layouts) and prescribes the correct Aurora grid classes, Fuse utilities, and theme-aware Tailwind utilities. It highlights when to use the Aurora layout__container + col-* system instead of raw Tailwind grids, shows preferred dark-mode patterns managed by the .dark selector, and recommends when to extract styles into SCSS with @apply. It also calls out anti-patterns to avoid and essential tailwind config settings.

When to use it

• Styling Angular component templates in Aurora projects
• Building forms — enforce Aurora grid layout for consistency
• Applying theme colors and ensuring dark-mode compatibility
• Creating reusable component styles with SCSS @apply
• Configuring Tailwind for Fuse + theme integration

Best practices

• Always use layout__container with col-* classes for forms instead of raw grid-cols utilities
• Prefer theme-aware utilities (bg-card, text-default, bg-primary) to ensure automatic dark-mode support
• Use mobile-first responsive prefixes (sm:, md:, lg:, xl:) and Aurora column semantics
• Extract reusable patterns into SCSS with @apply and create utility layers for common cases
• Avoid hard-coded hex colors; use theme color classes and dark variants when necessary
• Let tailwind.config.js manage dark mode (.dark selector) and set important: true to avoid specificity issues

Example use cases

• Two-column and three-column forms using layout__container and col-6/col-4 classes
• Page header + actions layout following the standard Aurora page structure
• Cards with theme-aware backgrounds, rounded corners and hover shadow transitions
• Custom component utilities defined via @layer utilities and @apply for consistent reuse
• Responsive component stacks that switch from column to row at sm/md breakpoints