Styling with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that enables rapid UI development.

Why Tailwind?

Developer Experience

• Fast Development: Build UIs quickly without writing custom CSS
• No Context Switching: Stay in your HTML/JSX
• Consistent Design: Pre-defined design tokens

Performance

• Purge Unused Styles: Only includes used classes
• Small Bundle Size: Minimal CSS output
• Optimized: Production builds are highly optimized

Design System

Color Palette

Our application uses a warm, wood-themed color scheme:

// Primary colors
bg-[#dcd6cc]  // Background
text-[#241a0f] // Text
border-[#7a502a] // Borders
bg-[#b87a3f] // Accents

Typography

• Font weights: font-semibold, font-bold, font-black
• Sizes: Responsive with sm:, md:, lg: prefixes
• Tracking: tracking-[0.05em] for headers

Components

Consistent component patterns:

<div className="rounded-xl border-[3px] border-[#ab7b45] bg-[#e8decf]">
  <div className="rounded-t-lg border-b-[3px] bg-[#d7cbb9]">
    Header
  </div>
  <div className="rounded-b-lg bg-[#d6c4ab]">
    Content
  </div>
</div>

Implementation Patterns

Responsive Design

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {/* Responsive grid */}
</div>

Hover States

<button className="transition-all hover:bg-[#a96c33] hover:shadow-md">
  Button
</button>

Custom Values

<div className="bg-[linear-gradient(135deg,#b87a3f_0%,#c7894f_45%,#a96c33_100%)]">
  Custom gradient
</div>

Benefits for The Workbench

1. Consistency: Unified design language across all pages
2. Speed: Rapid prototyping and iteration
3. Maintainability: Easy to update and modify styles
4. Responsive: Built-in responsive utilities

Best Practices

• Use semantic class names
• Extract repeated patterns into components
• Leverage Tailwind's responsive utilities
• Use custom values sparingly for brand colors