mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-07 22:24:06 -05:00
8d15219c12
* improvement(invite): aligned with rest of app * fix(invite): error handling * fix: addressed comments
41 lines
871 B
Plaintext
41 lines
871 B
Plaintext
---
|
|
description: Tailwind CSS and styling conventions
|
|
globs: ["apps/sim/**/*.tsx", "apps/sim/**/*.css"]
|
|
---
|
|
|
|
# Styling Rules
|
|
|
|
## Tailwind
|
|
|
|
1. **No inline styles** - Use Tailwind classes
|
|
2. **No duplicate dark classes** - Skip `dark:` when value matches light mode
|
|
3. **Exact values** - `text-[14px]`, `h-[26px]`
|
|
4. **Transitions** - `transition-colors` for interactive states
|
|
|
|
## Conditional Classes
|
|
|
|
```typescript
|
|
import { cn } from '@/lib/utils'
|
|
|
|
<div className={cn(
|
|
'base-classes',
|
|
isActive && 'active-classes',
|
|
disabled ? 'opacity-60' : 'hover:bg-accent'
|
|
)} />
|
|
```
|
|
|
|
## CSS Variables
|
|
|
|
For dynamic values (widths, heights) synced with stores:
|
|
|
|
```typescript
|
|
// In store
|
|
setWidth: (width) => {
|
|
set({ width })
|
|
document.documentElement.style.setProperty('--sidebar-width', `${width}px`)
|
|
}
|
|
|
|
// In component
|
|
<aside style={{ width: 'var(--sidebar-width)' }} />
|
|
```
|