​

Styling Variants

​

Comparison

​

Inline Styles

<div style={{
  backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
  padding: '16px',
  borderRadius: '8px'
}}>

• No dependencies
• Works everywhere
• Easy to understand
• Direct control

• Verbose
• Repetitive code
• Manual dark mode logic

​

Tailwind CSS

<div className="bg-white dark:bg-gray-800 p-4 rounded-lg">

• Concise code
• Automatic dark mode
• Design system integration
• Smaller bundle (with purging)

• Requires Tailwind
• Learning curve
• Less explicit

​

Switching Variants

rm -rf src/components/comments-threaded
# Edit replyke.json: change "style"
npx @replyke/cli add comments-threaded

​

Next Steps