Dorian
c28e6dd811
Foundation for the next-generation AI content surface UI: - 16 Cursor rules files covering philosophy, Vue conventions, design system, content surfaces, plugin system, AI integration, renderers, security, Bitcoin-only policy, dev/prod modes, accessibility, performance, animation, mobile UX, and git workflow - pnpm workspaces + Turborepo monorepo (@aiui/core, @aiui/app) - Vue 3 + Vite + TypeScript + Tailwind CSS 4 - Core type system: plugins, renderers, messages, content blocks - Plugin registry with renderer registration - 50 mock film fixtures with search/filter utilities - App shell with chat page layout - Environment config templates Made-with: Cursor
79 lines
2.3 KiB
Plaintext
79 lines
2.3 KiB
Plaintext
---
|
|
description: Tailwind CSS utility-first styling conventions for AIUI
|
|
globs: "**/*.vue,**/*.css,**/*.ts"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Tailwind CSS Styling
|
|
|
|
## Utility-First
|
|
Use Tailwind utilities directly in templates. Extract to component classes only when a pattern repeats 3+ times.
|
|
|
|
## 4px Spacing Grid
|
|
All spacing follows a 4px base grid:
|
|
- 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 8 = 32px, 12 = 48px, 16 = 64px
|
|
|
|
## Typography Scale
|
|
```
|
|
text-xs = 12px (metadata, timestamps)
|
|
text-sm = 14px (body text, buttons)
|
|
text-base = 16px (default body, inputs)
|
|
text-lg = 18px (subtitles)
|
|
text-xl = 20px (card titles)
|
|
text-2xl = 24px (section headings)
|
|
text-3xl = 30px (page headings)
|
|
text-4xl = 36px (hero headings)
|
|
```
|
|
|
|
Font weights: `font-normal` (body), `font-medium` (emphasis), `font-semibold` (headings/buttons), `font-bold` (strong emphasis).
|
|
|
|
## Border Radius
|
|
- `rounded-md` (6px) — inputs
|
|
- `rounded-lg` (8px) — buttons, standard cards
|
|
- `rounded-2xl` (16px) — modern cards, modals
|
|
- `rounded-full` — pills, avatars
|
|
|
|
## Shadows
|
|
- `shadow-sm` — subtle elevation
|
|
- `shadow-md` — standard card
|
|
- `shadow-lg` — modal, dropdown
|
|
- `shadow-xl` — hero card
|
|
|
|
## Glass Morphism
|
|
For cards over complex backgrounds:
|
|
```html
|
|
<div class="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl">
|
|
```
|
|
Never use glass morphism on body text containers or form inputs.
|
|
|
|
## Responsive — Mobile First
|
|
Always write base styles for mobile, enhance with breakpoints:
|
|
```html
|
|
<div class="text-base md:text-lg lg:text-xl p-4 md:p-6 lg:p-8">
|
|
```
|
|
Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px).
|
|
|
|
## Dark Mode
|
|
Use CSS custom properties for theme switching. Both Tailwind `dark:` and custom theme classes supported:
|
|
```html
|
|
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
|
|
```
|
|
|
|
## Gradients for Hierarchy
|
|
Use gradients strategically for emphasis, not decoration:
|
|
```html
|
|
<h2 class="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
|
|
```
|
|
|
|
## Hover States
|
|
All interactive elements need immediate visual feedback (< 100ms):
|
|
```html
|
|
<button class="transition-colors duration-200 hover:bg-primary-dark">
|
|
```
|
|
|
|
## Focus States
|
|
Always visible focus for accessibility:
|
|
```html
|
|
<button class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
|
|
```
|