Tailwind CSS styling patterns, dark theme implementation, and theme management for this project. Use when styling components, implementing UI changes, or working with the design system.
NEVER HARDCODE COLORS - Always use Tailwind config tokens and CSS custom properties for consistent theming and easy dark mode support.
All colors are defined in client/styles/index.css using CSS custom properties:
:root {
/* Background Colors */
--color-bg-base: 15 15 56; /* #0F0F38 */
--color-bg-surface: 26 26 74; /* #1A1A4A */
--color-bg-surface-light: 37 37 96; /* #252560 */
/* Accent Colors */
--color-accent: 45 129 255; /* #2D81FF */
--color-accent-hover: 74 148 255; /* #4A94FF */
/* Text Colors */
--color-text-primary: 255 255 255;
--color-text-secondary: 160 160 192;
--color-text-muted: 107 107 141;
}
Use the color tokens defined in tailwind.config.js:
// ✅ GOOD - Using config tokens
className = 'bg-base text-text-primary border-accent';
// ❌ BAD - Hardcoded colors
className = 'bg-gray-900 text-white border-blue-500';
bg-base - Main background (darkest)bg-surface - Card/panel backgroundsbg-surface-light - Hover states, subtle backgroundstext-text-primary - Primary text (white)text-text-secondary - Secondary text (light gray)text-text-muted - Muted/disabled texttext-accent / bg-accent - Primary accent (blue)text-accent-hover / bg-accent-hover - Hover statetext-accent-light / bg-accent-light - Lighter varianttext-error / bg-error - Error states (red)text-success / bg-success - Success states (green)text-warning / bg-warning - Warning states (yellow)border-white/10 - Subtle bordersborder-accent - Accent bordersThe project uses forced dark mode. Always ensure components work well with dark backgrounds.
/* Automatically applied */
html {
color-scheme: dark;
}
className = 'glass rounded-2xl p-6';
Multiple styles available in CSS:
// Gradient buttons
className = 'gradient-cta shine-effect px-6 py-3 rounded-lg';
// 3D effect button
className = 'cta-3d px-6 py-3 rounded-lg';
// Neon effect
className = 'cta-neon px-6 py-3 rounded-lg';
// Simple accent button
className = 'bg-accent hover:bg-accent-hover text-white glow-blue';
className = 'glass-card';
// Expands to: glass rounded-2xl p-6 transition-all duration-300
// Glow effects
className = 'glow-blue hover:glow-blue-lg';
// Animated borders
className = 'animated-border rounded-lg p-4';
// Fade animations
className = 'animate-fade-in';
className = 'animate-fade-in-up';
// Gradient animation
className = 'animate-gradient bg-gradient-to-r from-accent to-cyan-500';
// Float animation
className = 'animate-float';
// Delays for staggered animations
className = 'animation-delay-200';
className = 'animation-delay-400';
// Create custom delay classes if needed
className = '[animation-delay:0.3s]';
xs: - 475px (custom)sm: - 640px (default)md: - 768px (default)lg: - 1024px (default)xl: - 1280px (default)className = 'text-base md:text-lg lg:text-xl';
font-sans - Inter (default)font-display - DM Sans (for headings)Use Tailwind's default font size classes with text color tokens:
className = 'font-display text-4xl font-bold text-text-primary';
className = 'font-sans text-sm text-text-secondary';
// ✅ GOOD - Compose utility classes
<div className="glass-card border-accent/20">
<h2 className="text-xl font-bold text-text-primary">Title</h2>
<p className="text-sm text-text-secondary mt-2">Description</p>
</div>
// ❌ BAD
<div style={{ backgroundColor: '#0F0F38', color: '#FFFFFF' }}>
// ✅ GOOD
<div className="bg-base text-text-primary">
Use Tailwind's spacing scale consistently:
p-4, p-6, p-8 for paddingm-2, m-4, m-6 for marginsgap-2, gap-4, gap-6 for flex/grid gapsrounded-lg - Standard radius (8px)rounded-xl - Large radius (12px)rounded-2xl - Extra large radius (16px)rounded-full - Circleclient/styles/index.csstailwind.config.js to reference the variable/* client/styles/index.css */
:root {
--color-new-brand: 123 45 67;
}
/* tailwind.config.js */