Skip to main content

​
Styling Variants

Understanding inline styles vs Tailwind CSS variants.

​
Comparison

AspectInline StylesTailwind CSS
DependenciesNoneRequires Tailwind CSS
File SizeLarger (verbose)Smaller (concise)
Dark Modetheme propdark: prefix
CustomizationChange hex codesChange classes or config
Learning CurveEasier (plain CSS)Tailwind knowledge needed

​
Inline Styles

<div style={{
  backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
  padding: '16px',
  borderRadius: '8px'
}}>
Pros:
  • No dependencies
  • Works everywhere
  • Easy to understand
  • Direct control
Cons:
  • Verbose
  • Repetitive code
  • Manual dark mode logic

​
Tailwind CSS

<div className="bg-white dark:bg-gray-800 p-4 rounded-lg">
Pros:
  • Concise code
  • Automatic dark mode
  • Design system integration
  • Smaller bundle (with purging)
Cons:
  • Requires Tailwind
  • Learning curve
  • Less explicit

​
Switching Variants

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

​
Next Steps

Colors & Theming

Customize colors

Layout & Structure

Modify layout