abzhaw/tailwind-css

Tailwind CSS

Core Concepts

// Utility-first — classes describe what you want
<div className="flex items-center gap-4 p-6 rounded-xl bg-zinc-900 text-white">
  <span className="text-sm font-medium text-zinc-400">Status</span>
  <span className="text-green-400">● Online</span>
</div>

Dark Mode

// In tailwind.config.ts
export default { darkMode: 'class' }

// Usage
<div className="bg-white dark:bg-zinc-900 text-black dark:text-white">

Responsive Design

// Mobile-first breakpoints: sm(640), md(768), lg(1024), xl(1280)
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

Julia Dashboard Design Tokens

// Consistent color palette for the agent system
const colors = {
  online:   'text-emerald-400 bg-emerald-400/10',
  offline:  'text-zinc-500 bg-zinc-500/10',
  error:    'text-red-400 bg-red-400/10',
  warning:  'text-amber-400 bg-amber-400/10',
  surface:  'bg-zinc-900 border border-zinc-800',
  card:     'bg-zinc-800/50 rounded-xl p-4',
}

Glassmorphism Effect

<div className="backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl">

Animations (built-in)

<div className="transition-all duration-300 hover:scale-105 hover:shadow-lg">
<div className="animate-pulse">  {/* loading skeleton */}
<div className="animate-spin">   {/* loader */}