​

Styling Variants

​

Comparison

​

Inline Styles

<div style={{
  backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
  padding: '16px',
  borderRadius: '8px',
  border: `1px solid ${theme === 'dark' ? '#374151' : '#E5E7EB'}`
}}>
  <span style={{
    color: theme === 'dark' ? '#F9FAFB' : '#111827',
    fontWeight: 600,
  }}>
    Username
  </span>
</div>

• No additional dependencies
• Works everywhere (web and React Native)
• Explicit, self-contained styling
• Direct control over every value

• More verbose code
• Manual dark mode logic in every component
• Repeated color values across files

• Projects without Tailwind
• React Native / Expo apps
• Developers who prefer explicit styles

​

Tailwind CSS

<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
  <span className="text-gray-900 dark:text-gray-50 font-semibold">
    Username
  </span>
</div>

• Concise, readable code
• Automatic dark mode with dark: prefix
• Integrates with design systems
• Smaller bundle with purging

• Requires Tailwind CSS installed
• Learning curve if unfamiliar
• Less explicit (need to know what classes do)

• Projects already using Tailwind
• Web-only React apps
• Developers who prefer utility-first CSS

​

Choosing a Variant

? Which styling approach do you prefer?
❯ Tailwind CSS
  Inline Styles

​

Switching Variants

# 1. Delete installed component
rm -rf src/components/comments-threaded

# 2. Update sublay.json
# Change "style": "tailwind" to "style": "styled" (or vice versa)

# 3. Re-install
npx @sublay/cli add comments-threaded

​

React Native Styling

• Inline Styles → Standard React Native StyleSheet / style prop approach
• Tailwind → Uses NativeWind (className prop)

​

Next Steps