How to use Tailwind with React like a Guru

[reboottime]

How to use Tailwind with React like a Guru

Class Organization

1. Logical Grouping

Group-related classes for better readability:

<div
  className={cn(
    // Layout & Structure
    "flex flex-col md:flex-row gap-4",
    // Spacing & Positioning
    "p-4 lg:p-6 mx-auto",
    // Visual & Theme
    "bg-white rounded-lg shadow-md",
    // Interactive States
    "hover:shadow-lg focus:outline-none"
  )}
>

2. Component Extraction

Extract commonly used class combinations:

// components/ui/Button.tsx
const baseButtonStyles = "px-4 py-2 rounded-md transition-colors duration-200";
const buttonVariants = {
  primary: "bg-blue-500 text-white hover:bg-blue-600",
  secondary: "bg-gray-200 text-gray-700 hover:bg-gray-300"
};

export const Button = ({ variant = 'primary', className, ...props }) => (
  <button 
    className={cn(baseButtonStyles, buttonVariants[variant], className)} 
    {...props} 
  />
);

3. Dynamic Classes

Handle conditional styling cleanly:

const getStatusStyles = (status: 'active' | 'inactive' | 'error') => ({
  active: "bg-green-100 text-green-800 border-green-200",
  inactive: "bg-gray-100 text-gray-800 border-gray-200",
  error: "bg-red-100 text-red-800 border-red-200"
}[status]);

// Usage
<div className={cn(
  "px-3 py-1 rounded-full border",
  getStatusStyles(status)
)}>

4. Responsive Design

Organize breakpoint classes logically:

<div className={cn(
  // Grid layout
  "grid",
  "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",  // Columns across breakpoints
  "gap-4 sm:gap-6 lg:gap-8",                    // Spacing across breakpoints
  "p-4 sm:p-6 lg:p-8"                           // Padding across breakpoints
)}>

Maintainability Tips

1. Use Constants for Common Values

const FORM_INPUT = "w-full p-3 border rounded-md text-lg";
const FORM_ERROR = "border-red-500 focus:ring-red-500";
const FORM_SUCCESS = "border-slate-300 focus:ring-teal-500";

2. Create Theme Objects

const theme = {
  colors: {
    primary: "text-blue-600 bg-blue-50",
    secondary: "text-gray-600 bg-gray-50",
  },
  spacing: {
    tight: "gap-2 p-2",
    regular: "gap-4 p-4",
    loose: "gap-6 p-6",
  }
};

3. Document Complex Classes

// For complex responsive layouts, document the purpose
const cardGrid = cn(
  "grid", // Creates grid container
  "gap-4 p-4", // Base spacing
  "grid-cols-1", // Stack on mobile
  "md:grid-cols-2", // 2 columns on tablet
  "lg:grid-cols-3", // 3 columns on desktop
  "xl:grid-cols-4", // 4 columns on large screens
);

4. Use Custom CSS When Needed

/* styles/components.css */
@layer components {
  .custom-scrollbar {
    @apply scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent;
  }
  
  .card-hover-effect {
    @apply transition-transform duration-200 hover:scale-105;
  }
}

Code Review Checklist

• Classes are logically grouped
• Common patterns are extracted into components
• Responsive classes are organized clearly
• Interactive states are handled consistently
• Complex class combinations are documented
• No duplicate/conflicting classes
• Proper use of custom utilities where needed

Common Pitfalls to Avoid

1. Mixing conflicting classes
2. Overusing custom CSS instead of Tailwind utilities
3. Not extracting repeated class combinations
4. Inconsistent responsive breakpoint usage
5. Hard-to-read long class strings without organization
6. Missing important interactive states

[reboottime]

How to get you design Guide work with Tailwind & Shadcn

• provide your design guide in PDF format
• provide your shadcn tailwind and tailwind config template
• Ask claude to take role of UI expert and update your design token and configurations