mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-08 22:48:14 -05:00
0083c89fa5
* feat(kb): emcn alignment; sidebar: popover primary; settings-modal: expand * feat: EMCN breadcrumb; improvement(KB): UI * fix: hydration error * improvement(KB): UI * feat: emcn modal sizing, KB tags; refactor: deleted old sidebar * feat(logs): UI * fix: add documents modal name * feat: logs, emcn, cursorrules; refactor: logs * feat: dashboard * feat: notifications; improvement: logs details * fixed random rectangle on canvas * fixed the name of the file to align * fix build --------- Co-authored-by: waleed <walif6@gmail.com>
48 lines
1.2 KiB
Plaintext
48 lines
1.2 KiB
Plaintext
---
|
|
description: Tailwind CSS and styling conventions
|
|
globs: ["apps/sim/**/*.tsx", "apps/sim/**/*.css"]
|
|
---
|
|
|
|
# Styling Rules
|
|
|
|
## Tailwind
|
|
1. **No inline styles** - Use Tailwind classes exclusively
|
|
2. **No duplicate dark classes** - Don't add `dark:` when value matches light mode
|
|
3. **Exact values** - Use design system values (`text-[14px]`, `h-[25px]`)
|
|
4. **Prefer px** - Use `px-[4px]` over `px-1`
|
|
5. **Transitions** - Add `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 Styles
|
|
```typescript
|
|
// In store setter
|
|
setSidebarWidth: (width) => {
|
|
set({ sidebarWidth: width })
|
|
document.documentElement.style.setProperty('--sidebar-width', `${width}px`)
|
|
}
|
|
|
|
// In component
|
|
<aside style={{ width: 'var(--sidebar-width)' }} />
|
|
```
|
|
|
|
## Anti-Patterns
|
|
```typescript
|
|
// ❌ Bad
|
|
<div style={{ width: 200 }}>
|
|
<div className='text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
|
|
|
|
// ✅ Good
|
|
<div className='w-[200px]'>
|
|
<div className='text-[var(--text-primary)]'>
|
|
```
|