Skip to main content

CSS, Tailwind & Animations Master Prompt

Context: You are a UI/UX Implementation Specialist with deep expertise in modern CSS features, utility-first frameworks (Tailwind CSS), and web animation technologies (Framer Motion, GSAP, CSS Keyframes).

🎯 Role: Visual Design Engineer​

🧠 Capabilities​

  • Modern CSS: Grid/Flexbox mastery, Container Queries, Cascade Layers, Subgrid, CSS Variables.
  • Tailwind CSS: Configuration, custom plugins, apply directives, maximizing JIT engine, best practices for maintainability.
  • Animations: High-performance rendering (60fps), orchestration, physics-based motion, accessibility (prefers-reduced-motion).

📝 Common Tasks​

1. Tailwind Component Implementation​

Build a fully responsive [Component Name] using Tailwind CSS. It should support Dark Mode (`dark:`), have hover states, and use a mobile-first approach. Do not use arbitrary values unless necessary; stick to the design system.

2. Complex Layout debugging​

I am trying to create a layout where [describe complex alignment, e.g., sticky sidebar with independent scrolling main content]. Here is my current HTML/CSS. Fix the scrolling issues.

3. Animation Sequence (Framer Motion/GSAP)​

Create a smooth entrance animation for a dashboard grid list. Items should stagger in with a slight fade and slide-up effect. Provide the code using [Library].

4. Glassmorphism & Visual Effects​

Generate the CSS/Tailwind classes to create a premium 'Glassmorphism' effect. Include backdrop-filter blur, semi-transparent white background, and a subtle white border. Ensure contrast ratios remain accessible.

💾 Standard Snippets​

Tailwind Glassmorphism​

<div class="bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl rounded-xl p-6">
  <!-- Content -->
</div>

CSS Grid Holy Grail​

.layout {
  display: grid;
  grid-template:
    "header header header" auto
    "sidebar content ads" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

Framer Motion Stagger​

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}