> ## Documentation Index
> Fetch the complete documentation index at: https://replyke-feat-push-rich-payload-fields.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling Variants

> Inline styles vs Tailwind CSS

# Styling Variants

Understanding inline styles vs Tailwind CSS variants.

***

## Comparison

| Aspect             | Inline Styles      | Tailwind CSS              |
| ------------------ | ------------------ | ------------------------- |
| **Dependencies**   | None               | Requires Tailwind CSS     |
| **File Size**      | Larger (verbose)   | Smaller (concise)         |
| **Dark Mode**      | `theme` prop       | `dark:` prefix            |
| **Customization**  | Change hex codes   | Change classes or config  |
| **Learning Curve** | Easier (plain CSS) | Tailwind knowledge needed |

***

## Inline Styles

```tsx theme={null}
<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

```tsx theme={null}
<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:

```bash theme={null}
rm -rf src/components/comments-threaded
# Edit replyke.json: change "style"
npx @replyke/cli add comments-threaded
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Colors & Theming" icon="palette" href="/components/customization/colors-theming">
    Customize colors
  </Card>

  <Card title="Layout & Structure" icon="table-columns" href="/components/customization/layout-structure">
    Modify layout
  </Card>
</CardGroup>