diff --git a/.claude/skills/tailwind-v4.md b/.claude/skills/tailwind-v4.md new file mode 100644 index 0000000..2d453d5 --- /dev/null +++ b/.claude/skills/tailwind-v4.md @@ -0,0 +1,401 @@ +# Skill: Tailwind CSS v4 + +This document provides guidance for writing CSS and using Tailwind in Grimoire after the v4 migration. + +## Quick Reference + +### Import Syntax +```css +/* v4 - Single import replaces @tailwind directives */ +@import "tailwindcss"; +``` + +### Defining Theme Variables +```css +@theme { + --color-brand: oklch(0.72 0.11 221.19); + --font-display: "Satoshi", sans-serif; + --animate-fade: fade 0.3s ease-out; + + @keyframes fade { + from { opacity: 0; } + to { opacity: 1; } + } +} +``` + +### Custom Utilities +```css +/* v4 - Use @utility instead of @layer utilities */ +@utility content-auto { + content-visibility: auto; +} + +/* With nested selectors */ +@utility scrollbar-hidden { + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } +} +``` + +### Custom Variants +```css +/* Simple variant */ +@custom-variant theme-dark (&:where(.dark, .dark *)); + +/* Complex variant */ +@custom-variant any-hover { + @media (any-hover: hover) { + &:hover { + @slot; + } + } +} +``` + +--- + +## Grimoire Theme System + +Grimoire uses a **two-level CSS variable system** for runtime theming: + +### Level 1: Runtime Variables (set by ThemeProvider) +These are HSL values WITHOUT the `hsl()` wrapper: +```css +:root { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --primary: 210 40% 98%; + /* ... */ +} +``` + +### Level 2: Tailwind Color Mapping (in @theme) +These reference the runtime variables with `hsl()`: +```css +@theme { + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + --color-primary: hsl(var(--primary)); +} +``` + +### Using Colors in Components + +**In Tailwind classes:** +```tsx +
+