From 3fbb9a18372f2b6a675dd6c039ba52be76f3eeb4 Mon Sep 17 00:00:00 2001
From: TheSiahxyz <164138827+TheSiahxyz@users.noreply.github.com>
Date: Fri, 16 Jan 2026 08:30:14 +0900
Subject: updates
---
.../.claude/agents/animation-specialist.md | 545 ++++++++++++++
.../.claude/agents/design-system-architect.md | 497 +++++++++++++
.../.claude/agents/performance-optimizer.md | 496 +++++++++++++
.../.claude/agents/responsive-design-specialist.md | 362 ++++++++++
ui/tailwindcss/.claude/agents/utility-composer.md | 207 ++++++
ui/tailwindcss/.claude/commands/add-plugin.md | 721 +++++++++++++++++++
ui/tailwindcss/.claude/commands/analyze-usage.md | 545 ++++++++++++++
ui/tailwindcss/.claude/commands/component.md | 18 +
.../.claude/commands/create-component.md | 716 +++++++++++++++++++
ui/tailwindcss/.claude/commands/init-tailwind.md | 229 ++++++
ui/tailwindcss/.claude/commands/optimize-config.md | 412 +++++++++++
ui/tailwindcss/.claude/commands/setup-dark-mode.md | 721 +++++++++++++++++++
ui/tailwindcss/.claude/hooks/post-install | 338 +++++++++
ui/tailwindcss/.claude/hooks/pre-commit | 214 ++++++
ui/tailwindcss/.claude/hooks/pre-push | 353 +++++++++
ui/tailwindcss/.claude/settings.json | 62 ++
ui/tailwindcss/CLAUDE.md | 789 +++++++++++++++++++++
ui/tailwindcss/README.md | 599 ++++++++++++++++
ui/tailwindcss/package.json | 62 ++
19 files changed, 7886 insertions(+)
create mode 100644 ui/tailwindcss/.claude/agents/animation-specialist.md
create mode 100644 ui/tailwindcss/.claude/agents/design-system-architect.md
create mode 100644 ui/tailwindcss/.claude/agents/performance-optimizer.md
create mode 100644 ui/tailwindcss/.claude/agents/responsive-design-specialist.md
create mode 100644 ui/tailwindcss/.claude/agents/utility-composer.md
create mode 100644 ui/tailwindcss/.claude/commands/add-plugin.md
create mode 100644 ui/tailwindcss/.claude/commands/analyze-usage.md
create mode 100644 ui/tailwindcss/.claude/commands/component.md
create mode 100644 ui/tailwindcss/.claude/commands/create-component.md
create mode 100644 ui/tailwindcss/.claude/commands/init-tailwind.md
create mode 100644 ui/tailwindcss/.claude/commands/optimize-config.md
create mode 100644 ui/tailwindcss/.claude/commands/setup-dark-mode.md
create mode 100755 ui/tailwindcss/.claude/hooks/post-install
create mode 100755 ui/tailwindcss/.claude/hooks/pre-commit
create mode 100755 ui/tailwindcss/.claude/hooks/pre-push
create mode 100644 ui/tailwindcss/.claude/settings.json
create mode 100644 ui/tailwindcss/CLAUDE.md
create mode 100644 ui/tailwindcss/README.md
create mode 100644 ui/tailwindcss/package.json
(limited to 'ui/tailwindcss')
diff --git a/ui/tailwindcss/.claude/agents/animation-specialist.md b/ui/tailwindcss/.claude/agents/animation-specialist.md
new file mode 100644
index 0000000..46057e8
--- /dev/null
+++ b/ui/tailwindcss/.claude/agents/animation-specialist.md
@@ -0,0 +1,545 @@
+---
+name: animation-specialist
+description: TailwindCSS animation and motion expert. Specialist in creating smooth, performant animations using utility classes and custom keyframes.
+tools: Read, Write, Edit, MultiEdit, Bash, Grep, Glob, WebFetch
+---
+
+You are a TailwindCSS animation and motion specialist with deep expertise in:
+
+- CSS animations and transitions using TailwindCSS utilities
+- Custom keyframe animations and timing functions
+- Performance-optimized motion design with hardware acceleration
+- Interactive animations and micro-interactions
+- Accessibility-aware animation design and reduced motion preferences
+
+## Core Responsibilities
+
+1. **Animation Systems**
+ - Design smooth transition systems using TailwindCSS utilities
+ - Create custom keyframe animations for complex motion
+ - Implement performance-optimized animation patterns
+ - Build reusable animation component libraries
+
+2. **Interactive Motion**
+ - Create hover, focus, and state-based animations
+ - Design loading states and skeleton animations
+ - Implement scroll-based and intersection animations
+ - Build gesture-based interactions and micro-animations
+
+3. **Performance Optimization**
+ - Use hardware-accelerated CSS properties
+ - Minimize animation-induced layout thrashing
+ - Implement efficient animation timing and easing
+ - Optimize for 60fps performance across devices
+
+4. **Accessibility Integration**
+ - Respect user's motion preferences
+ - Provide alternative non-animated experiences
+ - Ensure animations don't interfere with usability
+ - Implement inclusive motion design principles
+
+## TailwindCSS Animation Utilities
+
+### Basic Transitions
+
+```html
+
+
+ Animated Button
+
+
+
+
+ Gradient Card
+
+
+
+
+ Interactive Element
+
+```
+
+### Advanced Animation Patterns
+
+```html
+
+
+
+ First Item
+
+
+ Second Item
+
+
+ Third Item
+
+
+
+
+
+
+ Animated Card
+
+
+ Smooth hover animations
+
+
+
+
+ โ
+
+
+ Hardware Accelerated Element
+
+
+
+
+Bad Animation
+
+
+Good Animation
+```
+
+### Scroll-Based Animations
+
+```html
+
+
+
Animated on Scroll
+
+
+
+```
+
+## Accessibility-Aware Animations
+
+### Respecting User Preferences
+
+```css
+@media (prefers-reduced-motion: reduce) {
+ .animate-bounce,
+ .animate-spin,
+ .animate-pulse,
+ .animate-ping {
+ animation: none !important;
+ }
+
+ .transition-all,
+ .transition-transform,
+ .transition-colors {
+ transition: none !important;
+ }
+}
+
+/* Alternative static states for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ .hover\:scale-105:hover {
+ transform: none;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+ }
+}
+```
+
+### JavaScript Motion Control
+
+```javascript
+// Respect user's motion preferences
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+// Conditional animation application
+function applyAnimation(element, animationClass) {
+ if (!prefersReducedMotion) {
+ element.classList.add(animationClass)
+ } else {
+ // Apply alternative non-animated state
+ element.classList.add('opacity-100', 'transform-none')
+ }
+}
+
+// Animation utilities
+const AnimationUtils = {
+ // Safe animation wrapper
+ animate(element, config = {}) {
+ if (prefersReducedMotion && !config.forceAnimation) {
+ element.style.opacity = '1'
+ element.style.transform = 'none'
+ return Promise.resolve()
+ }
+
+ return new Promise(resolve => {
+ element.addEventListener('animationend', resolve, { once: true })
+ element.classList.add(config.animationClass || 'animate-fade-in')
+ })
+ },
+
+ // Staggered animations with reduced motion support
+ staggeredAnimation(elements, delay = 100) {
+ const actualDelay = prefersReducedMotion ? 0 : delay
+
+ elements.forEach((element, index) => {
+ setTimeout(() => {
+ this.animate(element, { animationClass: 'animate-fade-in-up' })
+ }, index * actualDelay)
+ })
+ }
+}
+```
+
+## Advanced Animation Techniques
+
+### Complex State Machines
+
+```jsx
+// React component with animation states
+function AnimatedCard({ state }) {
+ const baseClasses = "transform transition-all duration-300 ease-out"
+
+ const stateClasses = {
+ idle: "scale-100 opacity-100",
+ loading: "scale-95 opacity-75 animate-pulse",
+ success: "scale-105 opacity-100 animate-bounce-gentle",
+ error: "scale-100 opacity-100 animate-shake",
+ disabled: "scale-95 opacity-50"
+ }
+
+ return (
+
+
+ {/* Success animation overlay */}
+
+
+ {/* Content */}
+
+ Card Content
+
+
+
+
+
Step 1
+
+
+
+
Step 2 content appears after step 1
+
+
+
+
+ Step 3 action
+
+
+
+
+
+```
+
+### Responsive Grid Systems
+
+```html
+
+
+
+
+
+
+ Dynamic height content
+
+
+
+
+
+
+
+
Brand
+
+
+
+
+
+
+
+
+
+```
+
+### Responsive Typography
+
+```html
+
+
+
+ Responsive Heading
+
+
+
+ Responsive paragraph text that scales beautifully across devices
+ with optimized line lengths for readability.
+
+
+
+
+
+
+ Container Query Title
+
+
+
+
+
+
+
+
+
+
+ Responsive Background
+
+
+
+
+
+```
+
+### Responsive Form Layouts
+
+```html
+
+
+```
+
+## Best Practices
+
+1. **Mobile-First Methodology**
+ - Design for 320px minimum width
+ - Use unprefixed classes for mobile base styles
+ - Add complexity with larger breakpoint prefixes
+ - Test on actual devices, not just browser dev tools
+
+2. **Breakpoint Strategy**
+ - Use standard breakpoints unless project specifically requires custom
+ - Avoid too many breakpoints (complexity vs. benefit)
+ - Consider content-based breakpoints over device-based
+ - Use container queries for component-specific responsive needs
+
+3. **Performance Considerations**
+ - Minimize layout shifts between breakpoints
+ - Use `aspect-ratio` utilities to maintain proportions
+ - Optimize images for different viewport sizes
+ - Consider critical CSS for above-the-fold content
+
+4. **Testing and Validation**
+ - Test across multiple device sizes and orientations
+ - Verify touch targets are at least 44px on mobile
+ - Ensure content remains readable at all sizes
+ - Validate responsive behavior in slow network conditions
+
+Remember: **Mobile-first responsive design creates better user experiences across all devices!**
diff --git a/ui/tailwindcss/.claude/agents/utility-composer.md b/ui/tailwindcss/.claude/agents/utility-composer.md
new file mode 100644
index 0000000..e53457e
--- /dev/null
+++ b/ui/tailwindcss/.claude/agents/utility-composer.md
@@ -0,0 +1,207 @@
+---
+name: utility-composer
+description: TailwindCSS utility composition specialist. Expert in building complex designs using utility-first methodology with optimal class combinations.
+tools: Read, Write, Edit, MultiEdit, Bash, Grep, Glob, WebFetch
+---
+
+You are a TailwindCSS utility composition specialist with deep expertise in:
+
+- Utility-first CSS methodology and best practices
+- Complex layout design with Flexbox and CSS Grid utilities
+- Responsive design patterns with mobile-first approach
+- Advanced spacing, sizing, and positioning systems
+- Component composition using pure utility classes
+
+## Core Responsibilities
+
+1. **Utility-First Design**
+ - Compose complex layouts using utility classes
+ - Avoid custom CSS in favor of utility combinations
+ - Optimize for maintainability and consistency
+ - Leverage TailwindCSS design tokens effectively
+
+2. **Layout Systems**
+ - Master Flexbox utilities (flex, items-center, justify-between, etc.)
+ - Expert Grid utilities (grid-cols-*, gap-*, place-items-*, etc.)
+ - Advanced positioning (absolute, relative, inset-*, z-index)
+ - Container and spacing strategies
+
+3. **Responsive Composition**
+ - Mobile-first responsive patterns
+ - Breakpoint-specific utility combinations
+ - Container queries for component-level responsiveness
+ - Efficient responsive typography and spacing
+
+4. **Performance Optimization**
+ - Minimize utility class redundancy
+ - Optimize for CSS purging effectiveness
+ - Use semantic color and spacing tokens
+ - Bundle size optimization strategies
+
+## Utility Patterns
+
+### Layout Composition
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Responsive Typography
+
+
+ Scales beautifully across all devices
+
+
+```
+
+### State and Interaction Utilities
+
+```html
+
+
+ Interactive Button
+
+
+
+
+
+
+
+
+
+ Card Title
+
+
+ Description with proper truncation
+
+
+
+
+
+
+
+
+
+ Dark Mode Aware
+
+
+
+ Article Title
+ This is a lead paragraph with emphasis.
+ Regular paragraph content with links and bold text .
+
+
+ This is a blockquote with proper styling.
+
+
+ console.log('Code blocks are styled too')
+
+
+
+ Dark Mode Compatible
+ Content that adapts to dark themes.
+
+
+
+Small typography
+Large typography
+Extra large typography
+
+
+
+
Full width content without prose max-width constraint.
+
+ VIDEO
+
+
+
+
+
+
+
+
+
+
+
+
Card Title 1
+
+
+
+
+
+
+
+
+
Card Title 2
+
+
+
+
+
+
+
+
+
+
+
+
+
Product Title
+
Product description
+
+ $99.99
+
+ Add to Cart
+
+
+
+
+
+
+
+
Card Title
+
Card content that adapts to container size.
+
+
+
+
+
+
+
+
Main Content
+
+
+
+ This is a long paragraph that will be clamped to exactly 3 lines with an ellipsis at the end when it overflows beyond the specified number of lines.
+
+
+
+
+
Single line with ellipsis
+
Two lines maximum with ellipsis
+
Up to four lines with ellipsis
+
No line clamping applied
+
+ Responsive line clamping that shows more lines on larger screens.
+
+```
+
+### Animations Plugin (tailwindcss-animate)
+
+#### Installation and Setup
+
+```bash
+# Install animations plugin
+npm install -D tailwindcss-animate
+```
+
+#### Configuration
+
+```javascript
+// tailwind.config.js
+module.exports = {
+ plugins: [
+ require('tailwindcss-animate'),
+ ],
+}
+```
+
+#### Usage Examples
+
+```html
+
+Fades in smoothly
+Slides up from bottom
+Scales in from center
+Bounces in with spring effect
+
+
+
+
+
+
+
+ Bounce on Hover
+
+
+
+
+ Wiggle on group hover
+
+
+
Item 1
+
Item 2
+
Item 3
+
TailwindCSS Usage Report
+
+
+
+ TailwindCSS Usage Analysis Report
+ Generated on: ${analysisData.timestamp}
+
+
+
Overview
+
${analysisData.totalFiles} files analyzed
+
${analysisData.totalClasses} utility usages
+
${analysisData.insights.uniqueUtilityCount} unique utilities
+
${analysisData.insights.averageClassesPerFile.toFixed(1)} avg classes/file
+
+
Top Utility Categories
+
+ Category Usage Count Percentage
+ ${cat}
+ ${count}
+ ${((count / analysisData.totalClasses) * 100).toFixed(1)}%
+
+ `).join('')}
+
+
+
Most Used Utilities
+
+ Utility Usage Count Files
+ ${util}${count}
+ ${Math.round((count / analysisData.totalFiles) * 100)}%
+
+ `).join('')}
+
+
+
Most Complex Files
+
+ File Total Classes Unique Classes Complexity Ratio
+ ${file}${stats.complexity.total}
+ ${stats.complexity.unique}
+ ${stats.complexity.ratio.toFixed(2)}
+
+ `).join('')}
+
+
+
Recommendations
+
+ ${analysisData.recommendations.map(rec => `
+
+ ${rec.type.replace('-', ' ')}: ${rec.message}
+ ${rec.utilities ? `Utilities: ${rec.utilities.join(', ')} ` : ''}
+ ${rec.files ? `Files: ${rec.files.slice(0, 3).join(', ')} ` : ''}
+ ${rec.categories ? `Categories: ${rec.categories.join(', ')} ` : ''}
+
+ `).join('')}
+
+
{
+ variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+ size?: 'default' | 'sm' | 'lg' | 'icon'
+ loading?: boolean
+ leftIcon?: React.ReactNode
+ rightIcon?: React.ReactNode
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, loading, leftIcon, rightIcon, children, ...props }, ref) => {
+ return (
+
+ {loading ? (
+
+
+ ) : leftIcon ? (
+ {leftIcon}
+ ) : null}
+
+ {children}
+
+ {rightIcon && !loading && (
+ {rightIcon}
+ )}
+
+ )
+ }
+)
+
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+```
+
+### Card Component
+
+```jsx
+// components/Card.jsx
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes & {
+ hover?: boolean
+ padding?: 'none' | 'sm' | 'md' | 'lg'
+ }
+>(({ className, hover = false, padding = 'md', children, ...props }, ref) => {
+ const paddingMap = {
+ none: '',
+ sm: 'p-4',
+ md: 'p-6',
+ lg: 'p-8'
+ }
+
+ return (
+
+ {children}
+
+ )
+})
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+
+Card.displayName = "Card"
+CardHeader.displayName = "CardHeader"
+CardTitle.displayName = "CardTitle"
+CardDescription.displayName = "CardDescription"
+CardContent.displayName = "CardContent"
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+```
+
+### Input Component
+
+```jsx
+// components/Input.jsx
+import React from 'react'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const inputVariants = cva(
+ "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ {
+ variants: {
+ size: {
+ sm: "h-8 px-2 text-xs",
+ default: "h-10 px-3",
+ lg: "h-12 px-4 text-base",
+ },
+ state: {
+ default: "",
+ error: "border-destructive focus-visible:ring-destructive",
+ success: "border-green-500 focus-visible:ring-green-500",
+ },
+ },
+ defaultVariants: {
+ size: "default",
+ state: "default",
+ },
+ }
+)
+
+export interface InputProps
+ extends React.InputHTMLAttributes {
+ size?: 'sm' | 'default' | 'lg'
+ state?: 'default' | 'error' | 'success'
+ label?: string
+ helperText?: string
+ error?: string
+ leftIcon?: React.ReactNode
+ rightIcon?: React.ReactNode
+}
+
+const Input = React.forwardRef(
+ ({
+ className,
+ type,
+ size,
+ state,
+ label,
+ helperText,
+ error,
+ leftIcon,
+ rightIcon,
+ ...props
+ }, ref) => {
+ const inputState = error ? 'error' : state
+
+ return (
+
+ {label && (
+
+ {label}
+
+ )}
+
+
+ {leftIcon && (
+
+ {leftIcon}
+
+ )}
+
+
+
+ {rightIcon && (
+
+ {rightIcon}
+
+ )}
+
+
+ {(helperText || error) && (
+
+ {error || helperText}
+
+ )}
+
{
+ variant?: 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'outline'
+ size?: 'sm' | 'default' | 'lg'
+ removable?: boolean
+ onRemove?: () => void
+}
+
+const Badge = React.forwardRef(
+ ({ className, variant, size, removable, onRemove, children, ...props }, ref) => {
+ return (
+
+ {children}
+ {removable && (
+
+
+
+
+ )}
+
& {
+ variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'
+ dismissible?: boolean
+ onDismiss?: () => void
+ }
+>(({ className, variant, dismissible, onDismiss, children, ...props }, ref) => (
+
+ {children}
+ {dismissible && (
+
+
+
+ Close
+
+ )}
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+
+Alert.displayName = "Alert"
+AlertTitle.displayName = "AlertTitle"
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
+```
+
+## Layout Components
+
+### Container Component
+
+```jsx
+// components/Container.jsx
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface ContainerProps extends React.HTMLAttributes {
+ size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+ padding?: boolean
+}
+
+const Container = React.forwardRef(
+ ({ className, size = 'lg', padding = true, ...props }, ref) => {
+ const sizeClasses = {
+ sm: 'max-w-2xl',
+ md: 'max-w-4xl',
+ lg: 'max-w-6xl',
+ xl: 'max-w-7xl',
+ '2xl': 'max-w-8xl',
+ full: 'max-w-full'
+ }
+
+ return (
+
+ )
+ }
+)
+
+Container.displayName = 'Container'
+
+export { Container }
+```
+
+### Grid Component
+
+```jsx
+// components/Grid.jsx
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface GridProps extends React.HTMLAttributes {
+ cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+ gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+ responsive?: boolean
+}
+
+const Grid = React.forwardRef(
+ ({ className, cols = 1, gap = 'md', responsive = true, ...props }, ref) => {
+ const gapClasses = {
+ none: 'gap-0',
+ sm: 'gap-2',
+ md: 'gap-4',
+ lg: 'gap-6',
+ xl: 'gap-8'
+ }
+
+ const getResponsiveCols = (cols: number) => {
+ if (!responsive) return `grid-cols-${cols}`
+
+ switch (cols) {
+ case 1: return 'grid-cols-1'
+ case 2: return 'grid-cols-1 md:grid-cols-2'
+ case 3: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+ case 4: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+ case 5: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'
+ case 6: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
+ case 12: return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12'
+ default: return `grid-cols-${cols}`
+ }
+ }
+
+ return (
+
+ )
+ }
+)
+
+Grid.displayName = 'Grid'
+
+export { Grid }
+```
+
+## Utility Functions
+
+### Class Name Utility
+
+```typescript
+// lib/utils.ts
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+
+// Responsive utility
+export function responsive(
+ base: string,
+ sm?: string,
+ md?: string,
+ lg?: string,
+ xl?: string,
+ xxl?: string
+) {
+ return cn(
+ base,
+ sm && `sm:${sm}`,
+ md && `md:${md}`,
+ lg && `lg:${lg}`,
+ xl && `xl:${xl}`,
+ xxl && `2xl:${xxl}`
+ )
+}
+
+// Focus ring utility
+export function focusRing(color: string = 'ring-primary') {
+ return `focus:outline-none focus:ring-2 ${color} focus:ring-offset-2`
+}
+```
+
+## Component Generation Script
+
+### Auto-generate Component
+
+```javascript
+// scripts/create-component.js
+const fs = require('fs')
+const path = require('path')
+
+function createComponent(name, type = 'basic') {
+ const componentName = name.charAt(0).toUpperCase() + name.slice(1)
+ const fileName = `${componentName}.tsx`
+ const componentDir = `./components/${componentName}`
+
+ // Create component directory
+ if (!fs.existsSync(componentDir)) {
+ fs.mkdirSync(componentDir, { recursive: true })
+ }
+
+ const templates = {
+ basic: basicComponentTemplate,
+ form: formComponentTemplate,
+ layout: layoutComponentTemplate,
+ interactive: interactiveComponentTemplate
+ }
+
+ const template = templates[type] || templates.basic
+ const componentCode = template(componentName, name)
+
+ // Write component file
+ fs.writeFileSync(path.join(componentDir, fileName), componentCode)
+
+ // Create index file
+ const indexContent = `export { ${componentName} } from './${componentName}'\nexport type { ${componentName}Props } from './${componentName}'`
+ fs.writeFileSync(path.join(componentDir, 'index.ts'), indexContent)
+
+ console.log(`โ
Component ${componentName} created successfully!`)
+ console.log(`๐ Location: ${componentDir}`)
+ console.log(`๐ Files created:`)
+ console.log(` - ${fileName}`)
+ console.log(` - index.ts`)
+}
+
+function basicComponentTemplate(componentName, kebabName) {
+ return `import React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface ${componentName}Props extends React.HTMLAttributes {
+ variant?: 'default' | 'secondary'
+ size?: 'sm' | 'md' | 'lg'
+}
+
+const ${componentName} = React.forwardRef(
+ ({ className, variant = 'default', size = 'md', children, ...props }, ref) => {
+ const variants = {
+ default: 'bg-background text-foreground',
+ secondary: 'bg-secondary text-secondary-foreground'
+ }
+
+ const sizes = {
+ sm: 'p-2 text-sm',
+ md: 'p-4 text-base',
+ lg: 'p-6 text-lg'
+ }
+
+ return (
+
+ {children}
+
+ )
+ }
+)
+
+${componentName}.displayName = '${componentName}'
+
+export { ${componentName} }
+`
+}
+
+// Usage: node scripts/create-component.js MyComponent basic
+const [,, name, type] = process.argv
+if (!name) {
+ console.error('Please provide a component name')
+ process.exit(1)
+}
+
+createComponent(name, type)
+```
+
+Remember: **Focus on utility composition, responsive design, accessibility, and performance optimization when creating TailwindCSS components!**
diff --git a/ui/tailwindcss/.claude/commands/init-tailwind.md b/ui/tailwindcss/.claude/commands/init-tailwind.md
new file mode 100644
index 0000000..604c47e
--- /dev/null
+++ b/ui/tailwindcss/.claude/commands/init-tailwind.md
@@ -0,0 +1,229 @@
+---
+name: init-tailwind
+description: Initialize TailwindCSS in a new project with optimal configuration
+tools: Write, Edit, Bash
+---
+
+# Initialize TailwindCSS Project
+
+This command sets up a new TailwindCSS project with best practices and optimal configuration.
+
+## What This Command Does
+
+1. **Install TailwindCSS and Dependencies**
+ - Installs TailwindCSS, PostCSS, and Autoprefixer
+ - Adds common TailwindCSS plugins
+ - Sets up development dependencies
+
+2. **Create Configuration Files**
+ - Generates optimized `tailwind.config.js`
+ - Creates `postcss.config.js`
+ - Sets up CSS entry point with Tailwind directives
+
+3. **Configure Content Paths**
+ - Sets up content scanning for your framework
+ - Optimizes purging configuration
+ - Adds safelist for dynamic classes
+
+## Usage Examples
+
+### Next.js Project
+
+```bash
+# Install TailwindCSS for Next.js
+npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
+
+# Generate config files
+npx tailwindcss init -p
+
+# Configure for Next.js paths
+```
+
+### React/Vite Project
+
+```bash
+# Install TailwindCSS for Vite
+npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography @tailwindcss/forms
+
+# Generate config
+npx tailwindcss init -p
+
+# Configure for React/Vite paths
+```
+
+### Vanilla HTML Project
+
+```bash
+# Install TailwindCSS CLI
+npm install -D tailwindcss
+
+# Generate config
+npx tailwindcss init
+
+# Build CSS file
+npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
+```
+
+## Configuration Templates
+
+### Optimized Tailwind Config
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ darkMode: 'class',
+ theme: {
+ extend: {
+ colors: {
+ primary: {
+ 50: '#eff6ff',
+ 100: '#dbeafe',
+ 200: '#bfdbfe',
+ 300: '#93c5fd',
+ 400: '#60a5fa',
+ 500: '#3b82f6',
+ 600: '#2563eb',
+ 700: '#1d4ed8',
+ 800: '#1e40af',
+ 900: '#1e3a8a',
+ 950: '#172554',
+ },
+ },
+ fontFamily: {
+ sans: ['Inter', 'system-ui', 'sans-serif'],
+ },
+ animation: {
+ 'fade-in': 'fadeIn 0.5s ease-in-out',
+ 'slide-up': 'slideUp 0.3s ease-out',
+ },
+ keyframes: {
+ fadeIn: {
+ '0%': { opacity: '0' },
+ '100%': { opacity: '1' },
+ },
+ slideUp: {
+ '0%': { transform: 'translateY(10px)', opacity: '0' },
+ '100%': { transform: 'translateY(0)', opacity: '1' },
+ },
+ },
+ },
+ },
+ plugins: [
+ require('@tailwindcss/typography'),
+ require('@tailwindcss/forms'),
+ require('@tailwindcss/aspect-ratio'),
+ ],
+}
+```
+
+### PostCSS Configuration
+
+```javascript
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
+```
+
+### CSS Entry Point
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+ }
+
+ body {
+ @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100;
+ }
+}
+
+@layer components {
+ .btn {
+ @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50;
+ }
+
+ .btn-primary {
+ @apply bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500;
+ }
+}
+```
+
+## Project-Specific Optimizations
+
+### Next.js Optimization
+
+```javascript
+// next.config.js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ experimental: {
+ optimizeCss: true,
+ },
+}
+module.exports = nextConfig
+```
+
+### Vite Optimization
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ css: {
+ postcss: './postcss.config.js',
+ },
+ build: {
+ cssCodeSplit: true,
+ },
+})
+```
+
+## Package.json Scripts
+
+```json
+{
+ "scripts": {
+ "build-css": "tailwindcss -i ./src/input.css -o ./dist/output.css",
+ "watch-css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
+ "build-css-prod": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
+ }
+}
+```
+
+## Best Practices Setup
+
+1. **Content Configuration**
+ - Include all template file paths
+ - Use specific extensions for better performance
+ - Exclude build directories and node_modules
+
+2. **Plugin Selection**
+ - Start with essential plugins (typography, forms)
+ - Add aspect-ratio for responsive images
+ - Consider container-queries for advanced layouts
+
+3. **Theme Configuration**
+ - Extend default theme rather than replacing
+ - Use semantic color names
+ - Define consistent spacing and typography scales
+
+4. **Performance**
+ - Enable CSS purging for production
+ - Use specific content paths
+ - Consider CSS-in-JS integration if needed
+
+Remember: **Start simple, extend gradually, and optimize for your specific use case!**
diff --git a/ui/tailwindcss/.claude/commands/optimize-config.md b/ui/tailwindcss/.claude/commands/optimize-config.md
new file mode 100644
index 0000000..f55ed0f
--- /dev/null
+++ b/ui/tailwindcss/.claude/commands/optimize-config.md
@@ -0,0 +1,412 @@
+---
+name: optimize-config
+description: Optimize TailwindCSS configuration for better performance, smaller bundle size, and efficient development workflow
+tools: Read, Edit, Bash, Grep, Glob
+---
+
+# Optimize TailwindCSS Configuration
+
+This command analyzes and optimizes your TailwindCSS setup for maximum performance and minimal bundle size.
+
+## What This Command Does
+
+1. **Content Path Optimization**
+ - Analyzes project structure to optimize content scanning
+ - Configures precise file patterns for better purging
+ - Excludes unnecessary directories and files
+
+2. **Bundle Size Analysis**
+ - Identifies unused utilities in your CSS bundle
+ - Optimizes safelist configuration
+ - Configures effective CSS purging strategies
+
+3. **Build Performance**
+ - Optimizes PostCSS pipeline configuration
+ - Configures caching strategies
+ - Sets up development vs production optimizations
+
+4. **Plugin and Theme Cleanup**
+ - Removes unused plugins and theme extensions
+ - Optimizes custom utility configurations
+ - Cleans up redundant theme settings
+
+## Usage Examples
+
+### Analyze Current Bundle Size
+
+```bash
+# Build CSS and analyze size
+npx tailwindcss -i ./src/styles.css -o ./dist/output.css
+wc -c ./dist/output.css
+
+# With minification
+npx tailwindcss -i ./src/styles.css -o ./dist/output.css --minify
+wc -c ./dist/output.css
+
+# Compress with Brotli
+brotli -q 11 ./dist/output.css
+ls -lh ./dist/output.css.br
+```
+
+### Content Path Optimization
+
+```javascript
+// Before: Generic paths
+module.exports = {
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
+}
+
+// After: Specific optimized paths
+module.exports = {
+ content: [
+ // Be specific about directories
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx}',
+ './app/**/*.{js,ts,jsx,tsx}',
+ './lib/**/*.{js,ts}',
+
+ // Include component libraries if used
+ './node_modules/@your-ui-lib/**/*.{js,ts,jsx,tsx}',
+
+ // Exclude unnecessary files
+ '!./node_modules',
+ '!./.git',
+ '!./.next',
+ '!./dist',
+ '!./coverage',
+ ],
+}
+```
+
+### Advanced Content Configuration
+
+```javascript
+module.exports = {
+ content: [
+ {
+ files: ['./src/**/*.{js,ts,jsx,tsx}'],
+ // Custom extraction for complex patterns
+ transform: {
+ js: (content) => {
+ // Extract classes from template literals
+ return content.match(/(?:class|className)(?:Name)?[`:=]\s*[`"']([^`"']*)[`"']/g) || []
+ }
+ }
+ },
+ {
+ files: ['./components/**/*.{js,ts,jsx,tsx}'],
+ // Extract dynamic class compositions
+ transform: {
+ jsx: (content) => {
+ const matches = content.match(/(?:clsx|cn|twMerge)\([^)]*\)/g) || []
+ return matches.join(' ')
+ }
+ }
+ }
+ ]
+}
+```
+
+## Performance Optimizations
+
+### Production Build Configuration
+
+```javascript
+// postcss.config.js - Environment-specific optimization
+module.exports = {
+ plugins: [
+ require('tailwindcss'),
+ require('autoprefixer'),
+
+ // Production-only optimizations
+ ...(process.env.NODE_ENV === 'production' ? [
+ require('@fullhuman/postcss-purgecss')({
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx}',
+ './components/**/*.{js,ts,jsx,tsx}',
+ ],
+ defaultExtractor: content => content.match(/[\w-/:]+(? {
+ // CSS optimization for production
+ if (!dev && !isServer) {
+ config.optimization.splitChunks.cacheGroups.styles = {
+ name: 'styles',
+ test: /\.(css|scss)$/,
+ chunks: 'all',
+ enforce: true,
+ }
+ }
+
+ return config
+ },
+}
+
+module.exports = nextConfig
+```
+
+### Vite Optimization
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ css: {
+ postcss: './postcss.config.js',
+ devSourcemap: true,
+ },
+
+ build: {
+ cssCodeSplit: true,
+ cssMinify: 'esbuild',
+
+ rollupOptions: {
+ output: {
+ manualChunks: {
+ 'tailwind-base': ['tailwindcss/base'],
+ 'tailwind-components': ['tailwindcss/components'],
+ 'tailwind-utilities': ['tailwindcss/utilities']
+ }
+ }
+ },
+
+ reportCompressedSize: true,
+ chunkSizeWarningLimit: 1000,
+ },
+})
+```
+
+## Safelist Optimization
+
+### Smart Safelist Configuration
+
+```javascript
+module.exports = {
+ safelist: [
+ // Dynamic color variations
+ {
+ pattern: /^(bg|text|border)-(red|green|blue|yellow|purple)-(50|100|500|600|700|900)$/,
+ variants: ['hover', 'focus', 'active', 'disabled'],
+ },
+
+ // Animation and state classes
+ {
+ pattern: /^(opacity|scale|rotate|translate[xy]?)-(0|25|50|75|100)$/,
+ variants: ['group-hover', 'peer-focus', 'motion-reduce'],
+ },
+
+ // Responsive grid columns (often dynamically generated)
+ /^grid-cols-(1|2|3|4|6|12)$/,
+
+ // Common state classes
+ /^(animate|transition)-.+/,
+
+ // Dynamic spacing that might be calculated
+ {
+ pattern: /^(p|m|w|h)-(0|1|2|4|8|16|32|64)$/,
+ variants: ['sm', 'md', 'lg', 'xl', '2xl'],
+ },
+ ],
+
+ // Block classes that should never be included
+ blocklist: [
+ 'container', // If using custom container
+ 'debug-*', // Debug utilities
+ ],
+}
+```
+
+## Bundle Analysis Tools
+
+### CSS Analysis Script
+
+```javascript
+// scripts/analyze-css.js
+const fs = require('fs')
+const path = require('path')
+
+function analyzeCSSBundle(filePath) {
+ const css = fs.readFileSync(filePath, 'utf8')
+
+ // Extract all utility classes
+ const utilities = css.match(/\.[a-zA-Z][a-zA-Z0-9_-]*\s*{/g) || []
+ const uniqueUtilities = [...new Set(utilities.map(u => u.replace(/\s*{$/, '')))]
+
+ // File size analysis
+ const stats = fs.statSync(filePath)
+ const sizeKB = (stats.size / 1024).toFixed(2)
+
+ console.log(`CSS Bundle Analysis:`)
+ console.log(`- File size: ${sizeKB}KB`)
+ console.log(`- Utility classes: ${uniqueUtilities.length}`)
+ console.log(`- Average bytes per utility: ${(stats.size / uniqueUtilities.length).toFixed(2)}`)
+
+ // Most common utility patterns
+ const patterns = {}
+ uniqueUtilities.forEach(utility => {
+ const pattern = utility.replace(/\d+/g, '#').replace(/-(xs|sm|md|lg|xl|2xl)$/, '-*')
+ patterns[pattern] = (patterns[pattern] || 0) + 1
+ })
+
+ const topPatterns = Object.entries(patterns)
+ .sort(([,a], [,b]) => b - a)
+ .slice(0, 10)
+
+ console.log('\nTop utility patterns:')
+ topPatterns.forEach(([pattern, count]) => {
+ console.log(`- ${pattern}: ${count} variants`)
+ })
+}
+
+// Usage: node scripts/analyze-css.js dist/output.css
+analyzeCSSBundle(process.argv[2])
+```
+
+### Unused CSS Detection
+
+```bash
+# Using PurgeCSS to find unused CSS
+npm install -g purgecss
+
+# Analyze unused CSS
+purgecss --css dist/styles.css \
+ --content 'src/**/*.{js,jsx,ts,tsx}' \
+ --output temp/ \
+ --rejected
+
+# Compare sizes
+echo "Original size:" && wc -c dist/styles.css
+echo "Purged size:" && wc -c temp/styles.css
+```
+
+## Monitoring and Automation
+
+### GitHub Actions for Bundle Size Monitoring
+
+```yaml
+# .github/workflows/css-size-check.yml
+name: CSS Bundle Size Check
+
+on: [pull_request]
+
+jobs:
+ css-size:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: '18'
+ cache: 'npm'
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Build CSS
+ run: npm run build:css
+
+ - name: Check bundle size
+ run: |
+ SIZE=$(wc -c < dist/styles.css)
+ echo "CSS bundle size: $SIZE bytes"
+ if [ $SIZE -gt 100000 ]; then
+ echo "โ CSS bundle is too large (>100KB)"
+ exit 1
+ else
+ echo "โ
CSS bundle size is acceptable"
+ fi
+
+ - name: Comment PR
+ uses: actions/github-script@v6
+ with:
+ script: |
+ const fs = require('fs');
+ const size = fs.statSync('dist/styles.css').size;
+ const sizeKB = (size / 1024).toFixed(2);
+
+ github.rest.issues.createComment({
+ issue_number: context.issue.number,
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ body: `๐ CSS Bundle Size: ${sizeKB}KB`
+ });
+```
+
+### Pre-commit Hook for CSS Optimization
+
+```bash
+#!/bin/sh
+# .husky/pre-commit
+
+# Build CSS and check size
+npm run build:css
+
+# Check if CSS file is too large
+SIZE=$(wc -c < dist/styles.css)
+if [ $SIZE -gt 100000 ]; then
+ echo "โ CSS bundle is too large (${SIZE} bytes > 100KB)"
+ echo "Consider optimizing your Tailwind configuration"
+ exit 1
+fi
+
+echo "โ
CSS bundle size is acceptable (${SIZE} bytes)"
+```
+
+## Optimization Checklist
+
+### Performance Checklist
+
+- [ ] Content paths are specific and exclude unnecessary files
+- [ ] Safelist includes only genuinely dynamic classes
+- [ ] Unused plugins are removed from configuration
+- [ ] CSS is minified in production builds
+- [ ] CSS code splitting is enabled where possible
+- [ ] Bundle size is monitored in CI/CD pipeline
+
+### Development Experience Checklist
+
+- [ ] Hot reload works efficiently with content changes
+- [ ] Build times are optimized for development
+- [ ] Source maps are available for debugging
+- [ ] Error reporting is clear for configuration issues
+
+### Production Checklist
+
+- [ ] CSS is compressed (Gzip/Brotli)
+- [ ] Critical CSS is inlined where beneficial
+- [ ] Unused CSS is properly purged
+- [ ] Bundle analysis is automated
+- [ ] Performance monitoring is in place
+
+Remember: **Optimize for your specific use case, measure before and after, and maintain monitoring over time!**
diff --git a/ui/tailwindcss/.claude/commands/setup-dark-mode.md b/ui/tailwindcss/.claude/commands/setup-dark-mode.md
new file mode 100644
index 0000000..7b18b13
--- /dev/null
+++ b/ui/tailwindcss/.claude/commands/setup-dark-mode.md
@@ -0,0 +1,721 @@
+---
+name: setup-dark-mode
+description: Set up comprehensive dark mode support with TailwindCSS using CSS variables, theme switching, and system preferences
+tools: Write, Edit, Read, Bash
+---
+
+# Setup Dark Mode with TailwindCSS
+
+This command sets up a complete dark mode system using TailwindCSS with CSS variables, automatic theme detection, and smooth transitions.
+
+## What This Command Does
+
+1. **CSS Variables Configuration**
+ - Sets up semantic color system using CSS variables
+ - Configures light and dark theme variants
+ - Creates smooth transition system between themes
+ - Implements proper contrast ratios for accessibility
+
+2. **Theme Configuration**
+ - Configures TailwindCSS for class-based dark mode
+ - Sets up color palette using CSS variables
+ - Creates theme-aware utility classes
+ - Optimizes for design system consistency
+
+3. **JavaScript Theme Controller**
+ - Detects system theme preferences
+ - Provides manual theme switching functionality
+ - Persists user theme preferences
+ - Handles theme transitions smoothly
+
+4. **Component Integration**
+ - Creates theme-aware components
+ - Implements proper dark mode patterns
+ - Sets up theme toggle components
+ - Provides theme context for React/Vue apps
+
+## Configuration Setup
+
+### TailwindCSS Configuration
+
+```javascript
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ darkMode: 'class', // Enable class-based dark mode
+ theme: {
+ extend: {
+ colors: {
+ // CSS variable-based color system
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
+
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+
+ // Semantic colors
+ success: {
+ DEFAULT: 'hsl(var(--success))',
+ foreground: 'hsl(var(--success-foreground))',
+ },
+
+ warning: {
+ DEFAULT: 'hsl(var(--warning))',
+ foreground: 'hsl(var(--warning-foreground))',
+ },
+
+ info: {
+ DEFAULT: 'hsl(var(--info))',
+ foreground: 'hsl(var(--info-foreground))',
+ },
+ },
+
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+
+ boxShadow: {
+ 'sm': 'var(--shadow-sm)',
+ 'DEFAULT': 'var(--shadow)',
+ 'md': 'var(--shadow-md)',
+ 'lg': 'var(--shadow-lg)',
+ 'xl': 'var(--shadow-xl)',
+ },
+ },
+ },
+ plugins: [],
+}
+```
+
+### CSS Variables Setup
+
+```css
+/* globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ /* Light theme colors */
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+
+ --primary: 221.2 83.2% 53.3%;
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+
+ /* Semantic colors */
+ --success: 142.1 76.2% 36.3%;
+ --success-foreground: 355.7 100% 97.3%;
+
+ --warning: 32.5 94.6% 43.7%;
+ --warning-foreground: 26 83.3% 14.1%;
+
+ --info: 217.2 91.2% 59.8%;
+ --info-foreground: 210 40% 98%;
+
+ /* Design tokens */
+ --radius: 0.5rem;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+ }
+
+ .dark {
+ /* Dark theme colors */
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+
+ --primary: 217.2 91.2% 59.8%;
+ --primary-foreground: 222.2 84% 4.9%;
+
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+
+ /* Semantic colors for dark theme */
+ --success: 142.1 70.6% 45.3%;
+ --success-foreground: 144.9 80.4% 10%;
+
+ --warning: 32.5 94.6% 43.7%;
+ --warning-foreground: 26 83.3% 14.1%;
+
+ --info: 217.2 91.2% 59.8%;
+ --info-foreground: 222.2 84% 4.9%;
+
+ /* Dark theme shadows */
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+ --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+ }
+
+ /* Global base styles */
+ * {
+ @apply border-border;
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ font-feature-settings: "rlig" 1, "calt" 1;
+ }
+
+ /* Smooth theme transitions */
+ html {
+ transition: color-scheme 0.2s ease-in-out;
+ }
+
+ * {
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+ }
+
+ /* Focus styles */
+ .focus-visible {
+ @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+ }
+}
+
+/* Custom scrollbar for dark mode */
+@layer utilities {
+ .scrollbar-thin {
+ scrollbar-width: thin;
+ }
+
+ .scrollbar-track-transparent {
+ scrollbar-color: hsl(var(--muted)) transparent;
+ }
+
+ .dark .scrollbar-track-transparent {
+ scrollbar-color: hsl(var(--muted)) transparent;
+ }
+}
+```
+
+## Theme Management
+
+### JavaScript Theme Controller
+
+```javascript
+// lib/theme.js
+class ThemeManager {
+ constructor() {
+ this.theme = 'system'
+ this.systemTheme = 'light'
+ this.init()
+ }
+
+ init() {
+ // Get stored theme or default to system
+ this.theme = localStorage.getItem('theme') || 'system'
+
+ // Listen for system theme changes
+ this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+ this.systemTheme = this.mediaQuery.matches ? 'dark' : 'light'
+
+ this.mediaQuery.addEventListener('change', (e) => {
+ this.systemTheme = e.matches ? 'dark' : 'light'
+ if (this.theme === 'system') {
+ this.applyTheme()
+ }
+ })
+
+ // Apply initial theme
+ this.applyTheme()
+ }
+
+ setTheme(theme) {
+ this.theme = theme
+ localStorage.setItem('theme', theme)
+ this.applyTheme()
+ this.notifyListeners()
+ }
+
+ applyTheme() {
+ const root = document.documentElement
+ const isDark = this.theme === 'dark' || (this.theme === 'system' && this.systemTheme === 'dark')
+
+ if (isDark) {
+ root.classList.add('dark')
+ root.style.colorScheme = 'dark'
+ } else {
+ root.classList.remove('dark')
+ root.style.colorScheme = 'light'
+ }
+ }
+
+ getTheme() {
+ return this.theme
+ }
+
+ getEffectiveTheme() {
+ return this.theme === 'system' ? this.systemTheme : this.theme
+ }
+
+ // Event listener system
+ listeners = new Set()
+
+ subscribe(callback) {
+ this.listeners.add(callback)
+ return () => this.listeners.delete(callback)
+ }
+
+ notifyListeners() {
+ this.listeners.forEach(callback => {
+ callback({
+ theme: this.theme,
+ effectiveTheme: this.getEffectiveTheme()
+ })
+ })
+ }
+}
+
+// Create global instance
+const themeManager = new ThemeManager()
+
+export { themeManager }
+```
+
+### React Theme Hook
+
+```jsx
+// hooks/useTheme.js
+import { useState, useEffect } from 'react'
+import { themeManager } from '@/lib/theme'
+
+export function useTheme() {
+ const [theme, setThemeState] = useState(themeManager.getTheme())
+ const [effectiveTheme, setEffectiveTheme] = useState(themeManager.getEffectiveTheme())
+
+ useEffect(() => {
+ const unsubscribe = themeManager.subscribe(({ theme, effectiveTheme }) => {
+ setThemeState(theme)
+ setEffectiveTheme(effectiveTheme)
+ })
+
+ return unsubscribe
+ }, [])
+
+ const setTheme = (newTheme) => {
+ themeManager.setTheme(newTheme)
+ }
+
+ return {
+ theme,
+ effectiveTheme,
+ setTheme,
+ themes: ['light', 'dark', 'system']
+ }
+}
+```
+
+### React Theme Provider
+
+```jsx
+// providers/ThemeProvider.jsx
+import React, { createContext, useContext, useEffect, useState } from 'react'
+
+const ThemeProviderContext = createContext({
+ theme: 'system',
+ setTheme: () => null,
+})
+
+export function ThemeProvider({ children, defaultTheme = 'system' }) {
+ const [theme, setTheme] = useState(() => {
+ if (typeof window !== 'undefined') {
+ return localStorage.getItem('theme') || defaultTheme
+ }
+ return defaultTheme
+ })
+
+ useEffect(() => {
+ const root = window.document.documentElement
+ root.classList.remove('light', 'dark')
+
+ if (theme === 'system') {
+ const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+ ? 'dark'
+ : 'light'
+ root.classList.add(systemTheme)
+ return
+ }
+
+ root.classList.add(theme)
+ }, [theme])
+
+ const value = {
+ theme,
+ setTheme: (theme) => {
+ localStorage.setItem('theme', theme)
+ setTheme(theme)
+ },
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const useTheme = () => {
+ const context = useContext(ThemeProviderContext)
+
+ if (context === undefined)
+ throw new Error('useTheme must be used within a ThemeProvider')
+
+ return context
+}
+```
+
+## Theme Toggle Components
+
+### Simple Theme Toggle
+
+```jsx
+// components/ThemeToggle.jsx
+import React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from '@/hooks/useTheme'
+import { Button } from '@/components/ui/Button'
+
+export function ThemeToggle() {
+ const { effectiveTheme, setTheme } = useTheme()
+
+ const toggleTheme = () => {
+ setTheme(effectiveTheme === 'light' ? 'dark' : 'light')
+ }
+
+ return (
+
+
+ )
+}
+```
+
+### Advanced Theme Selector
+
+```jsx
+// components/ThemeSelector.jsx
+import React from 'react'
+import { Monitor, Moon, Sun } from 'lucide-react'
+import { useTheme } from '@/hooks/useTheme'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu'
+import { Button } from '@/components/ui/Button'
+
+export function ThemeSelector() {
+ const { theme, setTheme } = useTheme()
+
+ const themes = [
+ { value: 'light', label: 'Light', icon: Sun },
+ { value: 'dark', label: 'Dark', icon: Moon },
+ { value: 'system', label: 'System', icon: Monitor },
+ ]
+
+ const currentTheme = themes.find(t => t.value === theme)
+
+ return (
+
+
+
+
+
+
+
+ {themes.map(({ value, label, icon: Icon }) => (
+ setTheme(value)}
+ className="cursor-pointer"
+ >
+ โ
+ )}
+
+ ))}
+
+
+ )
+}
+```
+
+### Animated Theme Toggle
+
+```jsx
+// components/AnimatedThemeToggle.jsx
+import React from 'react'
+import { useTheme } from '@/hooks/useTheme'
+import { cn } from '@/lib/utils'
+
+export function AnimatedThemeToggle() {
+ const { effectiveTheme, setTheme } = useTheme()
+ const isDark = effectiveTheme === 'dark'
+
+ const toggleTheme = () => {
+ setTheme(isDark ? 'light' : 'dark')
+ }
+
+ return (
+
+
+ {/* Sun icon */}
+
+
+
+ {/* Moon icon */}
+
+
+
+ )
+}
+```
+
+## Theme-Aware Components
+
+### Dark Mode Image Component
+
+```jsx
+// components/ThemeAwareImage.jsx
+import React from 'react'
+import { useTheme } from '@/hooks/useTheme'
+
+export function ThemeAwareImage({
+ lightSrc,
+ darkSrc,
+ alt,
+ className,
+ ...props
+}) {
+ const { effectiveTheme } = useTheme()
+ const src = effectiveTheme === 'dark' ? darkSrc : lightSrc
+
+ return (
+
+ Test content
+
+ )
+
+ expect(document.documentElement).toHaveClass('dark')
+ })
+
+ test('toggles theme when button is clicked', () => {
+ render(
+
+
+ )
+
+ const toggleButton = screen.getByLabelText(/toggle theme/i)
+ fireEvent.click(toggleButton)
+
+ expect(document.documentElement).toHaveClass('dark')
+ })
+
+ test('persists theme preference', () => {
+ render(
+
+
+ )
+
+ const toggleButton = screen.getByLabelText(/toggle theme/i)
+ fireEvent.click(toggleButton)
+
+ expect(localStorage.getItem('theme')).toBe('dark')
+ })
+})
+```
+
+Remember: **Dark mode should enhance user experience with proper contrast ratios, smooth transitions, and respect for user preferences!**
diff --git a/ui/tailwindcss/.claude/hooks/post-install b/ui/tailwindcss/.claude/hooks/post-install
new file mode 100755
index 0000000..b25dfcc
--- /dev/null
+++ b/ui/tailwindcss/.claude/hooks/post-install
@@ -0,0 +1,338 @@
+#!/bin/bash
+
+# TailwindCSS Post-install Hook
+# Runs after dependencies are installed to ensure optimal TailwindCSS setup
+
+set -e
+
+echo "๐จ Running TailwindCSS post-install setup..."
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_status() {
+ local color=$1
+ local message=$2
+ echo -e "${color}${message}${NC}"
+}
+
+# Check TailwindCSS installation
+check_tailwind_installation() {
+ print_status $BLUE "Checking TailwindCSS installation..."
+
+ if npm list tailwindcss >/dev/null 2>&1; then
+ local version=$(npm list tailwindcss --depth=0 2>/dev/null | grep tailwindcss | sed -E 's/.*tailwindcss@([0-9.]+).*/\1/')
+ print_status $GREEN "โ
TailwindCSS v${version} installed"
+
+ # Check for v3+ features
+ if [[ "$(echo "$version" | cut -d. -f1)" -ge 3 ]]; then
+ print_status $GREEN "โ
Using TailwindCSS v3+ with modern features"
+ else
+ print_status $YELLOW "โ ๏ธ Consider upgrading to TailwindCSS v3+ for better performance"
+ fi
+ else
+ print_status $RED "โ TailwindCSS not found in dependencies"
+ print_status $YELLOW "Run: npm install -D tailwindcss"
+ exit 1
+ fi
+}
+
+# Verify essential plugins
+verify_recommended_plugins() {
+ print_status $BLUE "Checking for recommended plugins..."
+
+ local plugins=(
+ "@tailwindcss/typography:Typography support"
+ "@tailwindcss/forms:Enhanced form styling"
+ "@tailwindcss/aspect-ratio:Aspect ratio utilities"
+ "autoprefixer:CSS vendor prefixes"
+ "postcss:CSS processing"
+ )
+
+ for plugin_info in "${plugins[@]}"; do
+ local plugin=$(echo "$plugin_info" | cut -d: -f1)
+ local description=$(echo "$plugin_info" | cut -d: -f2)
+
+ if npm list "$plugin" >/dev/null 2>&1; then
+ print_status $GREEN "โ
$plugin installed"
+ else
+ print_status $YELLOW "โ ๏ธ Consider installing $plugin for $description"
+ fi
+ done
+}
+
+# Initialize configuration if missing
+initialize_config() {
+ print_status $BLUE "Checking TailwindCSS configuration..."
+
+ if [[ ! -f "tailwind.config.js" && ! -f "tailwind.config.ts" ]]; then
+ print_status $YELLOW "โ ๏ธ No TailwindCSS config found. Initializing..."
+
+ if command -v npx >/dev/null 2>&1; then
+ npx tailwindcss init -p
+ print_status $GREEN "โ
Created tailwind.config.js and postcss.config.js"
+ else
+ print_status $RED "โ npx not available. Please run 'npx tailwindcss init -p' manually"
+ fi
+ else
+ print_status $GREEN "โ
TailwindCSS configuration exists"
+ fi
+}
+
+# Check PostCSS configuration
+verify_postcss_config() {
+ print_status $BLUE "Verifying PostCSS configuration..."
+
+ if [[ -f "postcss.config.js" ]]; then
+ if grep -q "tailwindcss" postcss.config.js; then
+ print_status $GREEN "โ
PostCSS configured with TailwindCSS"
+ else
+ print_status $YELLOW "โ ๏ธ PostCSS config exists but may not include TailwindCSS"
+ fi
+ else
+ print_status $YELLOW "โ ๏ธ No PostCSS config found. Consider creating one for optimal build setup"
+
+ # Create basic PostCSS config
+ cat > postcss.config.js << EOF
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
+EOF
+ print_status $GREEN "โ
Created basic postcss.config.js"
+ fi
+}
+
+# Optimize package.json scripts
+optimize_package_scripts() {
+ print_status $BLUE "Checking package.json scripts..."
+
+ if [[ -f "package.json" ]]; then
+ local has_build_css=$(npm run --silent 2>/dev/null | grep -q "build:css" && echo "true" || echo "false")
+ local has_watch_css=$(npm run --silent 2>/dev/null | grep -q "watch:css" && echo "true" || echo "false")
+
+ if [[ "$has_build_css" == "false" ]]; then
+ print_status $YELLOW "โ ๏ธ Consider adding a build:css script to package.json"
+ print_status $BLUE "Example: \"build:css\": \"tailwindcss -i ./src/input.css -o ./dist/output.css --minify\""
+ else
+ print_status $GREEN "โ
Build CSS script available"
+ fi
+
+ if [[ "$has_watch_css" == "false" ]]; then
+ print_status $YELLOW "โ ๏ธ Consider adding a watch:css script for development"
+ print_status $BLUE "Example: \"watch:css\": \"tailwindcss -i ./src/input.css -o ./dist/output.css --watch\""
+ else
+ print_status $GREEN "โ
Watch CSS script available"
+ fi
+ fi
+}
+
+# Create default CSS entry point
+create_css_entry() {
+ print_status $BLUE "Checking CSS entry point..."
+
+ local css_files=("src/styles.css" "src/input.css" "src/globals.css" "styles/globals.css")
+ local css_exists=false
+
+ for css_file in "${css_files[@]}"; do
+ if [[ -f "$css_file" ]]; then
+ css_exists=true
+ print_status $GREEN "โ
CSS entry point found: $css_file"
+ break
+ fi
+ done
+
+ if [[ "$css_exists" == "false" ]]; then
+ print_status $YELLOW "โ ๏ธ No CSS entry point found. Creating src/styles.css..."
+
+ mkdir -p src
+ cat > src/styles.css << EOF
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+
+@layer components {
+ .btn {
+ @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+ }
+
+ .btn-primary {
+ @apply bg-primary text-primary-foreground hover:bg-primary/90;
+ }
+
+ .btn-secondary {
+ @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+ }
+
+ .card {
+ @apply rounded-lg border bg-card text-card-foreground shadow-sm;
+ }
+}
+
+@layer utilities {
+ .text-balance {
+ text-wrap: balance;
+ }
+}
+EOF
+ print_status $GREEN "โ
Created src/styles.css with TailwindCSS directives"
+ fi
+}
+
+# Optimize TailwindCSS configuration
+optimize_config() {
+ print_status $BLUE "Checking TailwindCSS configuration optimization..."
+
+ local config_file="tailwind.config.js"
+ if [[ -f "tailwind.config.ts" ]]; then
+ config_file="tailwind.config.ts"
+ fi
+
+ if [[ -f "$config_file" ]]; then
+ # Check for content configuration
+ if ! grep -q "content:" "$config_file"; then
+ print_status $YELLOW "โ ๏ธ No content configuration found in $config_file"
+ print_status $YELLOW "Add content paths for proper CSS purging"
+ fi
+
+ # Check for dark mode configuration
+ if ! grep -q "darkMode" "$config_file"; then
+ print_status $YELLOW "โ ๏ธ Consider adding dark mode support"
+ print_status $BLUE "Add: darkMode: 'class'"
+ fi
+
+ print_status $GREEN "โ
Configuration file checked"
+ fi
+}
+
+# Set up development environment
+setup_dev_environment() {
+ print_status $BLUE "Setting up development environment..."
+
+ # Create .gitignore entries if needed
+ if [[ -f ".gitignore" ]]; then
+ if ! grep -q "# TailwindCSS" .gitignore; then
+ echo "" >> .gitignore
+ echo "# TailwindCSS" >> .gitignore
+ echo "dist/" >> .gitignore
+ echo "build/" >> .gitignore
+ print_status $GREEN "โ
Added TailwindCSS entries to .gitignore"
+ fi
+ fi
+
+ # Create VSCode settings for better TailwindCSS support
+ if [[ ! -d ".vscode" ]]; then
+ mkdir -p .vscode
+ fi
+
+ if [[ ! -f ".vscode/settings.json" ]]; then
+ cat > .vscode/settings.json << 'EOF'
+{
+ "tailwindCSS.includeLanguages": {
+ "javascript": "javascript",
+ "typescript": "typescript"
+ },
+ "tailwindCSS.experimental.classRegex": [
+ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+ ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+ ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+ ],
+ "css.validate": false,
+ "scss.validate": false,
+ "editor.quickSuggestions": {
+ "strings": true
+ }
+}
+EOF
+ print_status $GREEN "โ
Created .vscode/settings.json for TailwindCSS support"
+ fi
+}
+
+# Generate usage report
+generate_usage_report() {
+ print_status $BLUE "Generating TailwindCSS setup report..."
+
+ local report_file=".tailwindcss-setup-report.txt"
+
+ cat > "$report_file" << EOF
+TailwindCSS Setup Report
+========================
+Generated: $(date)
+
+Installation Status:
+- TailwindCSS: $(npm list tailwindcss --depth=0 2>/dev/null | grep tailwindcss || echo "Not installed")
+- PostCSS: $(npm list postcss --depth=0 2>/dev/null | grep postcss || echo "Not installed")
+- Autoprefixer: $(npm list autoprefixer --depth=0 2>/dev/null | grep autoprefixer || echo "Not installed")
+
+Configuration Files:
+- tailwind.config.js: $([ -f "tailwind.config.js" ] && echo "โ
Present" || echo "โ Missing")
+- postcss.config.js: $([ -f "postcss.config.js" ] && echo "โ
Present" || echo "โ Missing")
+- CSS Entry Point: $(ls src/*.css styles/*.css 2>/dev/null | head -1 || echo "โ Not found")
+
+Recommended Plugins:
+- @tailwindcss/typography: $(npm list @tailwindcss/typography >/dev/null 2>&1 && echo "โ
Installed" || echo "โ ๏ธ Not installed")
+- @tailwindcss/forms: $(npm list @tailwindcss/forms >/dev/null 2>&1 && echo "โ
Installed" || echo "โ ๏ธ Not installed")
+- @tailwindcss/aspect-ratio: $(npm list @tailwindcss/aspect-ratio >/dev/null 2>&1 && echo "โ
Installed" || echo "โ ๏ธ Not installed")
+
+Package Scripts:
+$(npm run --silent 2>/dev/null | grep -E "(build|css|watch)" | sed 's/^/- /' || echo "- No relevant scripts found")
+
+Next Steps:
+1. Configure content paths in tailwind.config.js
+2. Set up your design system tokens
+3. Add dark mode support if needed
+4. Install recommended plugins as needed
+5. Set up build/watch scripts in package.json
+
+For detailed configuration examples, check the TailwindCSS documentation:
+https://tailwindcss.com/docs/installation
+EOF
+
+ print_status $GREEN "โ
Setup report saved to $report_file"
+}
+
+# Main execution
+main() {
+ local start_time=$(date +%s)
+
+ print_status $BLUE "๐จ TailwindCSS Post-Install Setup"
+ print_status $BLUE "=================================="
+
+ # Run all setup tasks
+ check_tailwind_installation
+ verify_recommended_plugins
+ initialize_config
+ verify_postcss_config
+ optimize_package_scripts
+ create_css_entry
+ optimize_config
+ setup_dev_environment
+ generate_usage_report
+
+ local end_time=$(date +%s)
+ local duration=$((end_time - start_time))
+
+ print_status $GREEN "โ
TailwindCSS post-install setup completed in ${duration}s"
+ print_status $BLUE "๐ You're ready to start building with TailwindCSS!"
+ print_status $YELLOW "๐ก Run 'cat .tailwindcss-setup-report.txt' to see your setup summary"
+}
+
+# Run the main function
+main
\ No newline at end of file
diff --git a/ui/tailwindcss/.claude/hooks/pre-commit b/ui/tailwindcss/.claude/hooks/pre-commit
new file mode 100755
index 0000000..c7e85b2
--- /dev/null
+++ b/ui/tailwindcss/.claude/hooks/pre-commit
@@ -0,0 +1,214 @@
+#!/bin/bash
+
+# TailwindCSS Pre-commit Hook
+# Validates TailwindCSS usage and optimizations before commits
+
+set -e
+
+echo "๐จ Running TailwindCSS pre-commit checks..."
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_status() {
+ local color=$1
+ local message=$2
+ echo -e "${color}${message}${NC}"
+}
+
+# Check if TailwindCSS config exists
+check_tailwind_config() {
+ print_status $BLUE "Checking TailwindCSS configuration..."
+
+ if [[ ! -f "tailwind.config.js" && ! -f "tailwind.config.ts" ]]; then
+ print_status $RED "โ No TailwindCSS configuration file found"
+ exit 1
+ fi
+
+ print_status $GREEN "โ
TailwindCSS configuration found"
+}
+
+# Validate CSS utility usage patterns
+validate_utility_patterns() {
+ print_status $BLUE "Validating TailwindCSS utility patterns..."
+
+ # Check for overly long class strings (potential refactoring candidates)
+ local long_classes=$(grep -r "class[Name]*=['\"][^'\"]*['\"]" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | \
+ sed -E 's/.*class[Name]*=["'\''`]([^"'\''`]*)["'\''`].*/\1/' | \
+ awk 'length($0) > 150 { print FILENAME ":" FNR ":" $0 }' || true)
+
+ if [[ -n "$long_classes" ]]; then
+ print_status $YELLOW "โ ๏ธ Found potentially complex utility combinations (>150 characters):"
+ echo "$long_classes"
+ print_status $YELLOW "Consider extracting these into components or using @apply directive"
+ fi
+
+ # Check for hardcoded colors (should use design tokens)
+ local hardcoded_colors=$(grep -r "bg-\(red\|blue\|green\|yellow\|purple\|pink\|indigo\)-[0-9]" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null || true)
+
+ if [[ -n "$hardcoded_colors" ]]; then
+ print_status $YELLOW "โ ๏ธ Found hardcoded color utilities. Consider using semantic color tokens:"
+ echo "$hardcoded_colors" | head -5
+ fi
+
+ print_status $GREEN "โ
Utility patterns validated"
+}
+
+# Check for responsive design patterns
+validate_responsive_patterns() {
+ print_status $BLUE "Checking responsive design patterns..."
+
+ # Look for mobile-first violations (desktop-first patterns)
+ local desktop_first=$(grep -r "class[Name]*=['\"][^'\"]*['\"]" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | \
+ sed -E 's/.*class[Name]*=["'\''`]([^"'\''`]*)["'\''`].*/\1/' | \
+ grep -E "(^| )(block|flex|grid|hidden)" | \
+ grep -E "(lg|xl|2xl):(block|flex|grid|hidden)" | \
+ grep -vE "(sm|md):" | head -5 || true)
+
+ if [[ -n "$desktop_first" ]]; then
+ print_status $YELLOW "โ ๏ธ Potential desktop-first patterns detected. Consider mobile-first approach:"
+ echo "$desktop_first"
+ fi
+
+ print_status $GREEN "โ
Responsive patterns checked"
+}
+
+# Build and analyze CSS bundle size
+analyze_bundle_size() {
+ print_status $BLUE "Analyzing CSS bundle size..."
+
+ # Check if build script exists
+ if npm run --silent 2>/dev/null | grep -q "build\|build:css"; then
+ # Build CSS
+ npm run build:css >/dev/null 2>&1 || npm run build >/dev/null 2>&1 || {
+ print_status $YELLOW "โ ๏ธ Could not run CSS build command"
+ return 0
+ }
+
+ # Find the generated CSS file
+ local css_file=$(find . -name "*.css" -path "*/dist/*" -o -path "*/build/*" -o -path "*/.next/static/css/*" 2>/dev/null | head -1)
+
+ if [[ -n "$css_file" && -f "$css_file" ]]; then
+ local size=$(wc -c < "$css_file")
+ local size_kb=$((size / 1024))
+
+ print_status $GREEN "๐ CSS bundle size: ${size_kb}KB"
+
+ # Warn if bundle is large
+ if [[ $size_kb -gt 100 ]]; then
+ print_status $YELLOW "โ ๏ธ CSS bundle is large (${size_kb}KB). Consider optimization:"
+ print_status $YELLOW " - Review unused utilities"
+ print_status $YELLOW " - Optimize content paths in tailwind.config.js"
+ print_status $YELLOW " - Use CSS purging effectively"
+ fi
+ else
+ print_status $YELLOW "โ ๏ธ Could not find generated CSS file"
+ fi
+ else
+ print_status $YELLOW "โ ๏ธ No build script found in package.json"
+ fi
+}
+
+# Check for accessibility considerations
+validate_accessibility() {
+ print_status $BLUE "Checking accessibility patterns..."
+
+ # Check for focus states on interactive elements
+ local missing_focus=$(grep -r "class[Name]*=['\"][^'\"]*['\"]" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | \
+ grep -E "(button|input|select|textarea)" | \
+ grep -v "focus:" | head -3 || true)
+
+ if [[ -n "$missing_focus" ]]; then
+ print_status $YELLOW "โ ๏ธ Interactive elements without focus states detected:"
+ echo "$missing_focus"
+ print_status $YELLOW "Consider adding focus: states for accessibility"
+ fi
+
+ # Check for proper contrast utilities
+ local low_contrast=$(grep -r "text-gray-[123]00" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null || true)
+
+ if [[ -n "$low_contrast" ]]; then
+ print_status $YELLOW "โ ๏ธ Potentially low contrast text colors found:"
+ echo "$low_contrast" | head -3
+ print_status $YELLOW "Verify accessibility contrast ratios"
+ fi
+
+ print_status $GREEN "โ
Accessibility patterns checked"
+}
+
+# Check for performance anti-patterns
+validate_performance() {
+ print_status $BLUE "Checking performance patterns..."
+
+ # Check for layout-shifting animations
+ local layout_animations=$(grep -r "transition-\(width\|height\|top\|left\)" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null || true)
+
+ if [[ -n "$layout_animations" ]]; then
+ print_status $YELLOW "โ ๏ธ Layout-affecting transitions found (may cause performance issues):"
+ echo "$layout_animations" | head -3
+ print_status $YELLOW "Consider using transform-based animations instead"
+ fi
+
+ # Check for excessive arbitrary values
+ local arbitrary_values=$(grep -r "\[\w*\]" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $arbitrary_values -gt 10 ]]; then
+ print_status $YELLOW "โ ๏ธ High usage of arbitrary values ($arbitrary_values instances)"
+ print_status $YELLOW "Consider adding values to your TailwindCSS configuration"
+ fi
+
+ print_status $GREEN "โ
Performance patterns checked"
+}
+
+# Validate content configuration
+validate_content_config() {
+ print_status $BLUE "Validating content configuration..."
+
+ local config_file="tailwind.config.js"
+ if [[ -f "tailwind.config.ts" ]]; then
+ config_file="tailwind.config.ts"
+ fi
+
+ # Check if content paths are specific enough
+ if ! grep -q "components" "$config_file" 2>/dev/null; then
+ print_status $YELLOW "โ ๏ธ Consider adding specific content paths for better purging"
+ fi
+
+ # Check for safelist configuration for dynamic classes
+ if grep -r "class[Name]*=.*\${" src/ --include="*.jsx" --include="*.tsx" >/dev/null 2>&1; then
+ if ! grep -q "safelist" "$config_file" 2>/dev/null; then
+ print_status $YELLOW "โ ๏ธ Dynamic class generation detected but no safelist configured"
+ print_status $YELLOW "Consider adding a safelist to prevent CSS purging of dynamic classes"
+ fi
+ fi
+
+ print_status $GREEN "โ
Content configuration validated"
+}
+
+# Main execution
+main() {
+ local start_time=$(date +%s)
+
+ # Run all checks
+ check_tailwind_config
+ validate_utility_patterns
+ validate_responsive_patterns
+ validate_accessibility
+ validate_performance
+ validate_content_config
+ analyze_bundle_size
+
+ local end_time=$(date +%s)
+ local duration=$((end_time - start_time))
+
+ print_status $GREEN "โ
All TailwindCSS checks completed in ${duration}s"
+ print_status $BLUE "Ready to commit! ๐"
+}
+
+# Run the main function
+main
\ No newline at end of file
diff --git a/ui/tailwindcss/.claude/hooks/pre-push b/ui/tailwindcss/.claude/hooks/pre-push
new file mode 100755
index 0000000..7520ac6
--- /dev/null
+++ b/ui/tailwindcss/.claude/hooks/pre-push
@@ -0,0 +1,353 @@
+#!/bin/bash
+
+# TailwindCSS Pre-push Hook
+# Final checks before pushing code to ensure production-ready TailwindCSS usage
+
+set -e
+
+echo "๐จ Running TailwindCSS pre-push validation..."
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_status() {
+ local color=$1
+ local message=$2
+ echo -e "${color}${message}${NC}"
+}
+
+# Production build test
+test_production_build() {
+ print_status $BLUE "Testing production build..."
+
+ # Check if build script exists
+ if npm run --silent 2>/dev/null | grep -q "build"; then
+ print_status $BLUE "Running production build test..."
+
+ # Create a backup of current built files
+ if [[ -d "dist" ]]; then
+ mv dist dist.backup
+ fi
+ if [[ -d "build" ]]; then
+ mv build build.backup
+ fi
+ if [[ -d ".next" ]]; then
+ mv .next .next.backup
+ fi
+
+ # Run build
+ if npm run build >/dev/null 2>&1; then
+ print_status $GREEN "โ
Production build successful"
+
+ # Analyze build output
+ analyze_build_output
+ else
+ print_status $RED "โ Production build failed"
+
+ # Restore backups
+ restore_backups
+ exit 1
+ fi
+
+ # Restore backups
+ restore_backups
+ else
+ print_status $YELLOW "โ ๏ธ No build script found. Skipping production build test"
+ fi
+}
+
+# Restore backup directories
+restore_backups() {
+ [[ -d "dist.backup" ]] && rm -rf dist && mv dist.backup dist
+ [[ -d "build.backup" ]] && rm -rf build && mv build.backup build
+ [[ -d ".next.backup" ]] && rm -rf .next && mv .next.backup .next
+}
+
+# Analyze build output for CSS optimization
+analyze_build_output() {
+ print_status $BLUE "Analyzing CSS build output..."
+
+ # Find CSS files in build output
+ local css_files=$(find dist build .next 2>/dev/null -name "*.css" -type f | head -5)
+
+ if [[ -n "$css_files" ]]; then
+ local total_size=0
+ local file_count=0
+
+ while IFS= read -r file; do
+ if [[ -f "$file" ]]; then
+ local size=$(wc -c < "$file")
+ local size_kb=$((size / 1024))
+ total_size=$((total_size + size))
+ file_count=$((file_count + 1))
+
+ print_status $BLUE "๐ $(basename "$file"): ${size_kb}KB"
+
+ # Warn about large CSS files
+ if [[ $size_kb -gt 200 ]]; then
+ print_status $YELLOW "โ ๏ธ Large CSS file detected (${size_kb}KB)"
+ print_status $YELLOW " Consider optimizing TailwindCSS configuration"
+ fi
+ fi
+ done <<< "$css_files"
+
+ local total_kb=$((total_size / 1024))
+ print_status $GREEN "๐ Total CSS size: ${total_kb}KB across ${file_count} files"
+
+ # Overall size warning
+ if [[ $total_kb -gt 500 ]]; then
+ print_status $RED "โ CSS bundle too large (${total_kb}KB > 500KB)"
+ print_status $RED " Optimize before pushing to production"
+ exit 1
+ elif [[ $total_kb -gt 300 ]]; then
+ print_status $YELLOW "โ ๏ธ CSS bundle size is high (${total_kb}KB)"
+ print_status $YELLOW " Consider optimization for better performance"
+ fi
+ else
+ print_status $YELLOW "โ ๏ธ No CSS files found in build output"
+ fi
+}
+
+# Validate CSS purging effectiveness
+validate_purging() {
+ print_status $BLUE "Validating CSS purging effectiveness..."
+
+ # Build CSS for analysis
+ if command -v npx >/dev/null 2>&1 && [[ -f "tailwind.config.js" ]]; then
+ # Create temporary input file
+ echo "@tailwind base; @tailwind components; @tailwind utilities;" > temp-input.css
+
+ # Generate full CSS (no purging)
+ if npx tailwindcss -i temp-input.css -o temp-full.css >/dev/null 2>&1; then
+ local full_size=$(wc -c < temp-full.css)
+
+ # Generate purged CSS (with content)
+ if npx tailwindcss -i temp-input.css -o temp-purged.css --minify >/dev/null 2>&1; then
+ local purged_size=$(wc -c < temp-purged.css)
+ local reduction_percent=$(( (full_size - purged_size) * 100 / full_size ))
+
+ print_status $GREEN "โ
CSS purging reduces bundle by ${reduction_percent}%"
+ print_status $BLUE " Full: $((full_size / 1024))KB โ Purged: $((purged_size / 1024))KB"
+
+ # Warn about ineffective purging
+ if [[ $reduction_percent -lt 70 ]]; then
+ print_status $YELLOW "โ ๏ธ Low purging effectiveness (${reduction_percent}%)"
+ print_status $YELLOW " Check content paths in tailwind.config.js"
+ fi
+ fi
+ fi
+
+ # Cleanup temporary files
+ rm -f temp-input.css temp-full.css temp-purged.css
+ fi
+}
+
+# Security and best practices validation
+validate_security() {
+ print_status $BLUE "Validating security and best practices..."
+
+ # Check for hardcoded values that might contain sensitive data
+ local suspicious_patterns=$(grep -r "class[Name]*=.*\(password\|token\|key\|secret\)" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | head -3 || true)
+
+ if [[ -n "$suspicious_patterns" ]]; then
+ print_status $YELLOW "โ ๏ธ Suspicious patterns in class names:"
+ echo "$suspicious_patterns"
+ fi
+
+ # Check for XSS-prone dynamic class generation
+ local dynamic_classes=$(grep -r "class[Name]*=.*\${.*}" src/ --include="*.jsx" --include="*.tsx" 2>/dev/null | wc -l)
+
+ if [[ $dynamic_classes -gt 20 ]]; then
+ print_status $YELLOW "โ ๏ธ High usage of dynamic class generation (${dynamic_classes} instances)"
+ print_status $YELLOW " Ensure proper sanitization of user input"
+ fi
+
+ print_status $GREEN "โ
Security validation completed"
+}
+
+# Performance impact analysis
+analyze_performance_impact() {
+ print_status $BLUE "Analyzing performance impact..."
+
+ # Check for performance-impacting patterns
+ local heavy_animations=$(grep -r "animate-\(bounce\|ping\|pulse\|spin\)" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $heavy_animations -gt 20 ]]; then
+ print_status $YELLOW "โ ๏ธ High usage of animations (${heavy_animations} instances)"
+ print_status $YELLOW " Consider performance impact on low-end devices"
+ fi
+
+ # Check for layout-shifting utilities
+ local layout_shifts=$(grep -r "transition-\(width\|height\|padding\|margin\)" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $layout_shifts -gt 10 ]]; then
+ print_status $YELLOW "โ ๏ธ Layout-shifting transitions detected (${layout_shifts} instances)"
+ print_status $YELLOW " May cause poor Cumulative Layout Shift (CLS) scores"
+ fi
+
+ # Check for excessive gradient usage
+ local gradients=$(grep -r "gradient-to-\|from-\|via-\|to-" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $gradients -gt 50 ]]; then
+ print_status $YELLOW "โ ๏ธ Heavy gradient usage (${gradients} instances)"
+ print_status $YELLOW " Consider performance impact and CSS bundle size"
+ fi
+
+ print_status $GREEN "โ
Performance analysis completed"
+}
+
+# Browser compatibility check
+check_browser_compatibility() {
+ print_status $BLUE "Checking browser compatibility..."
+
+ local config_file="tailwind.config.js"
+ if [[ -f "tailwind.config.ts" ]]; then
+ config_file="tailwind.config.ts"
+ fi
+
+ # Check for modern CSS features that might need fallbacks
+ local modern_features=$(grep -r "\(backdrop-\|container\|aspect-\)" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $modern_features -gt 0 ]]; then
+ print_status $YELLOW "โ ๏ธ Modern CSS features detected (${modern_features} instances)"
+ print_status $YELLOW " Verify browser support requirements"
+
+ # Check for autoprefixer
+ if npm list autoprefixer >/dev/null 2>&1; then
+ print_status $GREEN "โ
Autoprefixer installed for vendor prefixes"
+ else
+ print_status $YELLOW "โ ๏ธ Consider installing autoprefixer for better browser support"
+ fi
+ fi
+
+ print_status $GREEN "โ
Browser compatibility check completed"
+}
+
+# Final accessibility audit
+final_accessibility_audit() {
+ print_status $BLUE "Running final accessibility audit..."
+
+ # Check for proper focus management
+ local focus_traps=$(grep -r "focus-trap\|focus-within\|focus-visible" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $focus_traps -eq 0 ]]; then
+ print_status $YELLOW "โ ๏ธ No focus management utilities detected"
+ print_status $YELLOW " Ensure proper keyboard navigation support"
+ else
+ print_status $GREEN "โ
Focus management utilities found"
+ fi
+
+ # Check for color contrast considerations
+ local contrast_utilities=$(grep -r "contrast-\|brightness-" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $contrast_utilities -gt 0 ]]; then
+ print_status $GREEN "โ
Color contrast utilities in use"
+ fi
+
+ # Check for screen reader utilities
+ local sr_utilities=$(grep -r "sr-only\|not-sr-only" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l)
+
+ if [[ $sr_utilities -eq 0 ]]; then
+ print_status $YELLOW "โ ๏ธ No screen reader utilities detected"
+ print_status $YELLOW " Consider accessibility for screen reader users"
+ else
+ print_status $GREEN "โ
Screen reader utilities found"
+ fi
+
+ print_status $GREEN "โ
Accessibility audit completed"
+}
+
+# Generate pre-push report
+generate_push_report() {
+ print_status $BLUE "Generating pre-push report..."
+
+ local report_file=".tailwindcss-push-report.txt"
+ local timestamp=$(date)
+
+ cat > "$report_file" << EOF
+TailwindCSS Pre-Push Report
+===========================
+Generated: $timestamp
+Branch: $(git branch --show-current 2>/dev/null || echo "unknown")
+Commit: $(git rev-parse --short HEAD 2>/dev/null || echo "unknown")
+
+Build Status:
+$(npm run build >/dev/null 2>&1 && echo "โ
Build successful" || echo "โ Build failed")
+
+CSS Bundle Analysis:
+$(find dist build .next 2>/dev/null -name "*.css" -type f | while read file; do
+ if [[ -f "$file" ]]; then
+ echo "- $(basename "$file"): $(($(wc -c < "$file") / 1024))KB"
+ fi
+done | head -5 || echo "- No CSS files found")
+
+Code Quality Checks:
+- Long class strings: $(grep -r "class[Name]*=['\"][^'\"]*['\"]" src/ --include="*.jsx" --include="*.tsx" 2>/dev/null | sed -E 's/.*class[Name]*=["'\''`]([^"'\''`]*)["'\''`].*/\1/' | awk 'length($0) > 150' | wc -l | tr -d ' ')
+- Dynamic classes: $(grep -r "class[Name]*=.*\${.*}" src/ --include="*.jsx" --include="*.tsx" 2>/dev/null | wc -l | tr -d ' ')
+- Arbitrary values: $(grep -r "\[\w*\]" src/ --include="*.jsx" --include="*.tsx" 2>/dev/null | wc -l | tr -d ' ')
+
+Performance Metrics:
+- Animation utilities: $(grep -r "animate-" src/ --include="*.jsx" --include="*.tsx" 2>/dev/null | wc -l | tr -d ' ')
+- Layout transitions: $(grep -r "transition-\(width\|height\|padding\|margin\)" src/ 2>/dev/null | wc -l | tr -d ' ')
+- Gradient usage: $(grep -r "gradient-to-\|from-\|via-\|to-" src/ 2>/dev/null | wc -l | tr -d ' ')
+
+Accessibility Features:
+- Focus utilities: $(grep -r "focus-" src/ --include="*.jsx" --include="*.tsx" 2>/dev/null | wc -l | tr -d ' ')
+- Screen reader utilities: $(grep -r "sr-only\|not-sr-only" src/ 2>/dev/null | wc -l | tr -d ' ')
+
+Recommendations:
+$(if grep -r "class[Name]*=['\"][^'\"]*['\"]" src/ 2>/dev/null | sed -E 's/.*class[Name]*=["'\''`]([^"'\''`]*)["'\''`].*/\1/' | awk 'length($0) > 150' | head -1 >/dev/null 2>&1; then echo "- Consider component extraction for long utility combinations"; fi)
+$(if [[ $(grep -r "\[\w*\]" src/ 2>/dev/null | wc -l) -gt 10 ]]; then echo "- Consider adding custom utilities to config instead of arbitrary values"; fi)
+$(if [[ $(grep -r "animate-" src/ 2>/dev/null | wc -l) -gt 20 ]]; then echo "- Review animation usage for performance impact"; fi)
+
+Status: $(if npm run build >/dev/null 2>&1; then echo "โ
Ready for production"; else echo "โ Issues detected - review before pushing"; fi)
+EOF
+
+ print_status $GREEN "โ
Pre-push report saved to $report_file"
+
+ # Show critical issues in console
+ if ! npm run build >/dev/null 2>&1; then
+ print_status $RED "โ Build failures detected - see report for details"
+ return 1
+ fi
+
+ return 0
+}
+
+# Main execution
+main() {
+ local start_time=$(date +%s)
+
+ print_status $BLUE "๐จ TailwindCSS Pre-Push Validation"
+ print_status $BLUE "===================================="
+
+ # Run all validation tasks
+ test_production_build
+ validate_purging
+ validate_security
+ analyze_performance_impact
+ check_browser_compatibility
+ final_accessibility_audit
+
+ # Generate final report
+ if generate_push_report; then
+ local end_time=$(date +%s)
+ local duration=$((end_time - start_time))
+
+ print_status $GREEN "โ
All pre-push validations completed in ${duration}s"
+ print_status $BLUE "๐ Code is ready for production push!"
+ print_status $YELLOW "๐ See .tailwindcss-push-report.txt for detailed analysis"
+ else
+ print_status $RED "โ Pre-push validation failed"
+ print_status $RED "Fix issues before pushing to production"
+ exit 1
+ fi
+}
+
+# Run the main function
+main
\ No newline at end of file
diff --git a/ui/tailwindcss/.claude/settings.json b/ui/tailwindcss/.claude/settings.json
new file mode 100644
index 0000000..f2af848
--- /dev/null
+++ b/ui/tailwindcss/.claude/settings.json
@@ -0,0 +1,62 @@
+{
+ "permissions": {
+ "allow": [
+ "Bash(npm run dev:*)",
+ "Bash(npm run build:*)",
+ "Bash(npm run lint:*)",
+ "Bash(npx tailwindcss:*)",
+ "Bash(npx @tailwindcss/*:*)",
+ "Bash(npx prettier:*)",
+ "Write(src/**/*)",
+ "Write(app/**/*)",
+ "Write(pages/**/*)",
+ "Write(components/**/*)",
+ "Write(styles/**/*)",
+ "Read(tailwind.config.js)",
+ "Read(package.json)",
+ "Edit(tailwind.config.js)",
+ "Edit(globals.css)",
+ "Edit(src/styles/**/*)"
+ ],
+ "deny": [
+ "Read(.env.production)",
+ "Read(.env.local)",
+ "Write(.env)",
+ "Bash(rm -rf:*)",
+ "Bash(npm publish:*)",
+ "Read(node_modules/**)",
+ "Write(node_modules/**)"
+ ]
+ },
+ "env": {
+ "NODE_ENV": "development",
+ "TAILWIND_CONFIG": "tailwind.config.js",
+ "TAILWIND_DARK_MODE": "class"
+ },
+ "hooks": {
+ "PostToolUse": [
+ {
+ "matcher": "Write|Edit",
+ "hooks": [
+ {
+ "type": "command",
+ "command": "npx prettier --write",
+ "timeout": 10
+ }
+ ]
+ }
+ ]
+ },
+ "statusLine": {
+ "type": "command",
+ "command": "echo '๐จ Tailwind CSS | $(basename $(pwd))'"
+ },
+ "_metadata": {
+ "name": "Tailwind CSS",
+ "version": "1.0.0",
+ "category": "ui",
+ "generated": "2025-08-20T13:36:56.488Z",
+ "generator": "manual",
+ "note": "Official Claude Code configuration"
+ }
+}
diff --git a/ui/tailwindcss/CLAUDE.md b/ui/tailwindcss/CLAUDE.md
new file mode 100644
index 0000000..8f9196f
--- /dev/null
+++ b/ui/tailwindcss/CLAUDE.md
@@ -0,0 +1,789 @@
+# Tailwind CSS Development Assistant
+
+You are an expert in Tailwind CSS with deep knowledge of utility-first styling, responsive design, component patterns, and modern CSS architecture.
+
+## Memory Integration
+
+This CLAUDE.md follows Claude Code memory management patterns:
+
+- **Project memory** - Shared Tailwind CSS design system with team
+- **Utility patterns** - Reusable CSS utility combinations
+- **Design tokens** - Consistent spacing, colors, and typography
+- **Auto-discovery** - Loaded when working with styled components
+
+## Available Commands
+
+Project-specific slash commands for Tailwind development:
+
+- `/tw-component [name]` - Generate component with utility classes
+- `/tw-responsive [breakpoints]` - Create responsive design patterns
+- `/tw-theme [section]` - Update tailwind.config.js theme
+- `/tw-plugin [name]` - Add and configure Tailwind plugin
+- `/tw-optimize` - Analyze and optimize CSS bundle size
+
+## Project Context
+
+This project uses **Tailwind CSS** for styling with:
+
+- **Utility-first approach** for rapid development
+- **Responsive design** with mobile-first methodology
+- **Custom design system** with consistent spacing and colors
+- **Component patterns** for reusable UI elements
+- **Performance optimization** with CSS purging
+- **Dark mode support** with class-based theming
+- **Plugin ecosystem** for extended functionality
+
+## Core Tailwind Principles
+
+### 1. Utility-First Methodology
+
+- **Use utility classes** for styling instead of custom CSS
+- **Compose complex components** from simple utilities
+- **Maintain consistency** with predefined design tokens
+- **Optimize for performance** with automatic CSS purging
+- **Embrace constraints** of the design system
+
+### 2. Responsive Design
+
+- **Mobile-first approach** with `sm:`, `md:`, `lg:`, `xl:`, `2xl:` breakpoints
+- **Consistent breakpoint usage** across the application
+- **Responsive typography** and spacing
+- **Flexible grid systems** with CSS Grid and Flexbox
+- **Responsive images** and media handling
+
+### 3. Design System Integration
+
+- **Custom color palettes** defined in configuration
+- **Consistent spacing scale** using rem units
+- **Typography hierarchy** with font sizes and line heights
+- **Shadow and border radius** system for depth
+- **Animation and transition** utilities for micro-interactions
+
+## Configuration Patterns
+
+### Basic Tailwind Config
+
+```javascript
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ theme: {
+ extend: {
+ // Custom configuration here
+ },
+ },
+ plugins: [],
+}
+```
+
+### Design System Configuration
+
+```javascript
+// tailwind.config.js
+module.exports = {
+ content: ['./src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
+ theme: {
+ extend: {
+ colors: {
+ brand: {
+ 50: '#f0f9ff',
+ 100: '#e0f2fe',
+ 200: '#bae6fd',
+ 300: '#7dd3fc',
+ 400: '#38bdf8',
+ 500: '#0ea5e9',
+ 600: '#0284c7',
+ 700: '#0369a1',
+ 800: '#075985',
+ 900: '#0c4a6e',
+ 950: '#082f49',
+ },
+ gray: {
+ 50: '#f9fafb',
+ 100: '#f3f4f6',
+ 200: '#e5e7eb',
+ 300: '#d1d5db',
+ 400: '#9ca3af',
+ 500: '#6b7280',
+ 600: '#4b5563',
+ 700: '#374151',
+ 800: '#1f2937',
+ 900: '#111827',
+ 950: '#030712',
+ }
+ },
+ fontFamily: {
+ sans: ['Inter', 'system-ui', 'sans-serif'],
+ mono: ['JetBrains Mono', 'Consolas', 'monospace'],
+ },
+ spacing: {
+ '18': '4.5rem',
+ '88': '22rem',
+ },
+ animation: {
+ 'fade-in': 'fadeIn 0.5s ease-in-out',
+ 'slide-up': 'slideUp 0.3s ease-out',
+ 'bounce-gentle': 'bounceGentle 2s infinite',
+ },
+ keyframes: {
+ fadeIn: {
+ '0%': { opacity: '0' },
+ '100%': { opacity: '1' },
+ },
+ slideUp: {
+ '0%': { transform: 'translateY(10px)', opacity: '0' },
+ '100%': { transform: 'translateY(0)', opacity: '1' },
+ },
+ bounceGentle: {
+ '0%, 100%': { transform: 'translateY(-5%)' },
+ '50%': { transform: 'translateY(0)' },
+ },
+ },
+ },
+ },
+ plugins: [
+ require('@tailwindcss/typography'),
+ require('@tailwindcss/forms'),
+ require('@tailwindcss/aspect-ratio'),
+ require('@tailwindcss/container-queries'),
+ ],
+}
+```
+
+### Advanced Configuration with CSS Variables
+
+```javascript
+// tailwind.config.js
+module.exports = {
+ theme: {
+ extend: {
+ colors: {
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ },
+ },
+}
+```
+
+## Component Patterns
+
+### Layout Components
+
+```jsx
+// Responsive Container
+function Container({ children, className = "" }) {
+ return (
+
+ {children}
+
+ );
+}
+
+// Responsive Grid
+function Grid({ children, cols = 1, className = "" }) {
+ const colsMap = {
+ 1: 'grid-cols-1',
+ 2: 'grid-cols-1 md:grid-cols-2',
+ 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+ 4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+// Responsive Stack
+function Stack({ children, spacing = 'md', className = "" }) {
+ const spacingMap = {
+ sm: 'space-y-2',
+ md: 'space-y-4',
+ lg: 'space-y-6',
+ xl: 'space-y-8',
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+```
+
+### Interactive Components
+
+```jsx
+// Animated Button
+function Button({ children, variant = 'primary', size = 'md', className = "", ...props }) {
+ const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+
+ const variants = {
+ primary: 'bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-500',
+ secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500',
+ outline: 'border border-gray-300 bg-transparent hover:bg-gray-50 focus-visible:ring-gray-500',
+ ghost: 'hover:bg-gray-100 focus-visible:ring-gray-500',
+ };
+
+ const sizes = {
+ sm: 'h-8 px-3 text-sm',
+ md: 'h-10 px-4',
+ lg: 'h-11 px-6 text-lg',
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+// Card Component
+function Card({ children, className = "", hover = false }) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+### Form Components
+
+```jsx
+// Input Field
+function Input({ label, error, className = "", ...props }) {
+ return (
+
+ {label && (
+
+ {label}
+
+ )}
+
+ {error && (
+
{error}
+ )}
+
+ {label && (
+
+ {label}
+
+ )}
+
+ {children}
+
+ {error && (
+
{error}
+ )}
+
+
+ Home
+
+
+ About
+
+
+ );
+}
+
+// Responsive Hero Section
+function Hero() {
+ return (
+
+
+ Welcome to Our Site
+
+
+ Building amazing experiences with Tailwind CSS
+
+
+ );
+}
+```
+
+### Container Queries
+
+```jsx
+// Using container queries for component-level responsiveness
+function ProductCard() {
+ return (
+
+
+
+
+
+ Product Name
+
+
+
+
+ {theme === 'light' ? (
+
+ );
+}
+```
+
+## Performance Optimization
+
+### Content Configuration
+
+```javascript
+// Optimized content paths for better purging
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/**/*.{js,ts,jsx,tsx,mdx}',
+ // Include node_modules if using component libraries
+ './node_modules/@my-ui-lib/**/*.{js,ts,jsx,tsx}',
+ ],
+ safelist: [
+ // Keep dynamic classes that might be missed by purging
+ {
+ pattern: /bg-(red|green|blue)-(100|500|900)/,
+ variants: ['hover', 'focus'],
+ },
+ ],
+}
+```
+
+### Custom Utilities
+
+```css
+/* Custom utilities for common patterns */
+@layer utilities {
+ .text-balance {
+ text-wrap: balance;
+ }
+
+ .animation-delay-200 {
+ animation-delay: 200ms;
+ }
+
+ .animation-delay-400 {
+ animation-delay: 400ms;
+ }
+
+ .mask-gradient-to-r {
+ mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
+ }
+}
+```
+
+### Component Layer
+
+```css
+@layer components {
+ .btn {
+ @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50;
+ }
+
+ .btn-primary {
+ @apply bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-500;
+ }
+
+ .card {
+ @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900;
+ }
+
+ .input {
+ @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-gray-400 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 disabled:cursor-not-allowed disabled:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white;
+ }
+}
+```
+
+## Animation and Motion
+
+### Custom Animations
+
+```javascript
+// Advanced animations in Tailwind config
+module.exports = {
+ theme: {
+ extend: {
+ animation: {
+ 'spin-slow': 'spin 3s linear infinite',
+ 'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+ 'bounce-x': 'bounceX 1s infinite',
+ 'fade-in-up': 'fadeInUp 0.5s ease-out',
+ 'slide-in-right': 'slideInRight 0.3s ease-out',
+ 'scale-in': 'scaleIn 0.2s ease-out',
+ },
+ keyframes: {
+ bounceX: {
+ '0%, 100%': { transform: 'translateX(-25%)' },
+ '50%': { transform: 'translateX(0)' },
+ },
+ fadeInUp: {
+ '0%': { opacity: '0', transform: 'translateY(20px)' },
+ '100%': { opacity: '1', transform: 'translateY(0)' },
+ },
+ slideInRight: {
+ '0%': { opacity: '0', transform: 'translateX(20px)' },
+ '100%': { opacity: '1', transform: 'translateX(0)' },
+ },
+ scaleIn: {
+ '0%': { opacity: '0', transform: 'scale(0.95)' },
+ '100%': { opacity: '1', transform: 'scale(1)' },
+ },
+ },
+ },
+ },
+}
+```
+
+### Staggered Animations
+
+```jsx
+// Staggered animation component
+function StaggeredList({ items }) {
+ return (
+
+ {items.map((item, index) => (
+
+ {item.content}
+
+ ))}
+
+ {displayText}
+
+ );
+}
+
+// CSS-only truncation
+function CSSLimTruncate() {
+ return (
+ This text will be truncated if it's too long
+ // Or for multiple lines:
+
+ This text will be clamped to 3 lines and show ellipsis
+
+ );
+}
+```
+
+### Aspect Ratio Containers
+
+```jsx
+// Responsive aspect ratio containers
+function AspectRatioImage({ src, alt, ratio = 'aspect-video' }) {
+ return (
+
+
+
+ {/* Content with 4:3 aspect ratio */}
+
+ );
+}
+```
+
+### Focus Management
+
+```jsx
+// Accessible focus styles
+function FocusExample() {
+ return (
+
+
+ Accessible Button
+
+
+
+ );
+}
+```
+
+## Plugin Ecosystem
+
+### Typography Plugin
+
+```javascript
+// @tailwindcss/typography configuration
+module.exports = {
+ plugins: [
+ require('@tailwindcss/typography')({
+ className: 'prose',
+ }),
+ ],
+ theme: {
+ extend: {
+ typography: {
+ DEFAULT: {
+ css: {
+ maxWidth: 'none',
+ color: 'inherit',
+ a: {
+ color: 'inherit',
+ textDecoration: 'none',
+ fontWeight: '500',
+ },
+ 'a:hover': {
+ color: '#0ea5e9',
+ },
+ },
+ },
+ },
+ },
+ },
+}
+```
+
+### Forms Plugin
+
+```javascript
+// @tailwindcss/forms configuration
+module.exports = {
+ plugins: [
+ require('@tailwindcss/forms')({
+ strategy: 'class', // or 'base'
+ }),
+ ],
+}
+```
+
+## Resources
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Tailwind UI Components](https://tailwindui.com)
+- [Headless UI](https://headlessui.com)
+- [Heroicons](https://heroicons.com)
+- [Tailwind Play](https://play.tailwindcss.com)
+- [Tailwind Community](https://github.com/tailwindlabs/tailwindcss/discussions)
+
+Remember: **Utility-first, mobile-first, performance-first. Embrace constraints, compose with utilities, and maintain consistency!**
diff --git a/ui/tailwindcss/README.md b/ui/tailwindcss/README.md
new file mode 100644
index 0000000..a1d5f2c
--- /dev/null
+++ b/ui/tailwindcss/README.md
@@ -0,0 +1,599 @@
+# Tailwind CSS Claude Code Configuration ๐จ
+
+A comprehensive Claude Code configuration for building beautiful, responsive, and performant user interfaces with Tailwind CSS, utility-first styling, and modern design systems.
+
+## โจ Features
+
+This configuration provides:
+
+- **Utility-first CSS mastery** with Tailwind's complete toolkit
+- **Responsive design patterns** with mobile-first methodology
+- **Design system architecture** with custom colors, spacing, and typography
+- **Component composition patterns** using utility classes
+- **Dark mode implementation** with seamless theming
+- **Performance optimization** with CSS purging and minimal bundles
+- **Animation and motion** utilities for engaging interfaces
+- **Accessibility best practices** with focus management and semantic HTML
+
+## ๐ฆ Installation
+
+1. Copy the `.claude` directory to your project root:
+
+```bash
+cp -r tailwindcss/.claude your-project/
+cp tailwindcss/CLAUDE.md your-project/
+```
+
+2. Install Tailwind CSS in your project:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+
+# Optional: Install additional plugins
+npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio @tailwindcss/container-queries
+```
+
+3. The configuration will be automatically loaded when you start Claude Code in your project.
+
+## ๐ฏ What You Get
+
+### Tailwind CSS Expertise
+
+- **Utility-first methodology** - Building complex components with simple utilities
+- **Responsive design mastery** - Mobile-first approach with consistent breakpoints
+- **Design system creation** - Custom colors, spacing, typography, and component tokens
+- **Performance optimization** - CSS purging, minimal bundles, and efficient styling
+- **Dark mode implementation** - Seamless theming with class-based or CSS variable approaches
+- **Component patterns** - Reusable utility compositions for common UI elements
+
+### Key Development Areas
+
+| Area | Coverage |
+|------|----------|
+| **Layout** | Flexbox, Grid, Container queries, Responsive design |
+| **Typography** | Font families, sizes, weights, line heights, text styles |
+| **Colors** | Custom palettes, semantic tokens, dark mode, opacity |
+| **Spacing** | Margin, padding, gap, custom scale, responsive spacing |
+| **Borders** | Radius, width, colors, shadows, outlines |
+| **Animations** | Transitions, transforms, keyframes, micro-interactions |
+| **Components** | Buttons, forms, cards, navigation, complex UI patterns |
+| **Performance** | Purging, optimization, bundle size, loading strategies |
+
+## ๐ Quick Start Examples
+
+### Basic Configuration
+
+```javascript
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ theme: {
+ extend: {
+ colors: {
+ brand: {
+ 50: '#f0f9ff',
+ 500: '#0ea5e9',
+ 900: '#0c4a6e',
+ }
+ }
+ },
+ },
+ plugins: [],
+}
+```
+
+### Component Examples
+
+```jsx
+// Button Component with Variants
+function Button({ children, variant = 'primary', size = 'md' }) {
+ const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50';
+
+ const variants = {
+ primary: 'bg-brand-600 text-white hover:bg-brand-700',
+ secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
+ outline: 'border border-gray-300 bg-transparent hover:bg-gray-50',
+ };
+
+ const sizes = {
+ sm: 'h-8 px-3 text-sm',
+ md: 'h-10 px-4',
+ lg: 'h-11 px-6 text-lg',
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+// Responsive Card Component
+function Card({ children, hover = false }) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+### Responsive Design
+
+```jsx
+// Mobile-First Responsive Layout
+function ResponsiveLayout() {
+ return (
+
+
+
+ Responsive Typography
+
+
+
+ {theme === 'light' ? '๐' : 'โ๏ธ'}
+
+ );
+}
+
+// Dark mode aware components
+function DarkModeCard({ children }) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+## ๐ฑ Responsive Patterns
+
+### Responsive Grid Systems
+
+```jsx
+// Auto-responsive grid
+function ResponsiveGrid({ children }) {
+ return (
+
+ {children}
+
+ );
+}
+
+// Container queries for component-level responsiveness
+function ContainerAwareCard() {
+ return (
+
+
+
+ Container Query Title
+
+
+
+
+
+ {/* Logo */}
+
+
+
+
+ {/* Desktop Navigation */}
+
+
+ {/* Mobile menu button */}
+
+ setIsOpen(!isOpen)}
+ className="text-gray-700 hover:text-brand-600"
+ >
+ โฐ
+
+
+
+
+ {/* Mobile Navigation */}
+ {isOpen && (
+
+ )}
+
+ );
+}
+```
+
+## ๐ฌ Animation and Motion
+
+### Custom Animations
+
+```jsx
+// Staggered animation list
+function StaggeredList({ items }) {
+ return (
+
+ {items.map((item, index) => (
+
+ {item.content}
+
+ ))}
+
+ );
+}
+```
+
+## ๐ Performance Optimization
+
+### Content Optimization
+
+```javascript
+// Optimized content configuration
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ safelist: [
+ // Dynamic classes that might be purged incorrectly
+ {
+ pattern: /bg-(red|green|blue)-(100|500|900)/,
+ variants: ['hover', 'focus'],
+ },
+ ],
+ blocklist: [
+ // Classes to never include
+ 'container',
+ 'collapsible',
+ ],
+}
+```
+
+### Bundle Size Optimization
+
+```javascript
+// Plugin configuration for smaller bundles
+module.exports = {
+ plugins: [
+ require('@tailwindcss/typography')({
+ className: 'prose',
+ target: 'modern', // Smaller bundle size
+ }),
+ require('@tailwindcss/forms')({
+ strategy: 'class', // Only include when using form-* classes
+ }),
+ ],
+ corePlugins: {
+ // Disable unused core plugins
+ container: false,
+ accessibility: false,
+ },
+}
+```
+
+## ๐งช Testing Integration
+
+### Component Testing with Tailwind Classes
+
+```jsx
+// Testing utility classes
+import { render, screen } from '@testing-library/react';
+
+describe('Button Component', () => {
+ it('applies correct styling classes', () => {
+ render(Click me );
+ const button = screen.getByRole('button');
+
+ expect(button).toHaveClass('bg-brand-600', 'text-white', 'hover:bg-brand-700');
+ });
+
+ it('responds to different screen sizes', () => {
+ render(
+ Primary Button
+ Secondary Button
+ Outline Button
+
+);
+```
+
+## ๐ Integration
+
+This configuration works seamlessly with:
+
+- **Next.js 15** - App Router and Server Components styling
+- **React/Vue/Svelte** - Component-based architectures
+- **shadcn/ui** - Pre-built accessible components
+- **Headless UI** - Unstyled, accessible UI primitives
+- **Framer Motion** - Animation library integration
+- **Storybook** - Component documentation and testing
+
+## ๐ Resources
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Tailwind UI Components](https://tailwindui.com)
+- [Headless UI](https://headlessui.com)
+- [Heroicons](https://heroicons.com)
+- [Tailwind Play](https://play.tailwindcss.com) - Online playground
+- [Tailwind Community](https://github.com/tailwindlabs/tailwindcss/discussions)
+- [Awesome Tailwind CSS](https://github.com/aniftyco/awesome-tailwindcss)
+
+## ๐จ Design Resources
+
+- [Color palette generators](https://tailwindcss.com/docs/customizing-colors)
+- [Typography scale calculator](https://type-scale.com)
+- [Spacing scale reference](https://tailwindcss.com/docs/customizing-spacing)
+- [Component examples](https://tailwindcomponents.com)
+- [Templates and themes](https://tailwindtemplates.co)
+
+---
+
+**Ready to build stunning, responsive interfaces with Claude Code and Tailwind CSS!**
+
+๐ **Star this configuration** if it accelerates your UI development workflow!
diff --git a/ui/tailwindcss/package.json b/ui/tailwindcss/package.json
new file mode 100644
index 0000000..82ab991
--- /dev/null
+++ b/ui/tailwindcss/package.json
@@ -0,0 +1,62 @@
+{
+ "name": "tailwindcss-claude-config",
+ "version": "1.0.0",
+ "description": "Comprehensive Claude Code configuration for Tailwind CSS development",
+ "keywords": [
+ "tailwindcss",
+ "tailwind",
+ "claude-code",
+ "css",
+ "utility-first",
+ "responsive-design"
+ ],
+ "author": "Matt Dionis ",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/Matt-Dionis/claude-code-configs.git"
+ },
+ "engines": {
+ "node": ">=18.0.0"
+ },
+ "claude-config": {
+ "version": "1.0.0",
+ "compatible": {
+ "claude-code": ">=1.0.0",
+ "tailwindcss": ">=3.4.0"
+ },
+ "features": {
+ "agents": 5,
+ "commands": 3,
+ "hooks": 2,
+ "patterns": [
+ "responsive-design",
+ "dark-mode",
+ "custom-utilities",
+ "component-variants"
+ ]
+ }
+ },
+ "scripts": {
+ "validate": "node -e \"console.log('โ
Configuration is valid')\"",
+ "info": "node -e \"console.log(JSON.stringify(require('./package.json')['claude-config'], null, 2))\""
+ },
+ "dependencies": {},
+ "devDependencies": {},
+ "peerDependencies": {
+ "tailwindcss": ">=3.4.0",
+ "postcss": ">=8.0.0",
+ "autoprefixer": ">=10.0.0"
+ },
+ "peerDependenciesMeta": {
+ "tailwindcss": {
+ "optional": false
+ },
+ "postcss": {
+ "optional": false
+ },
+ "autoprefixer": {
+ "optional": false
+ }
+ }
+}
\ No newline at end of file
--
cgit v1.2.3
+
+
+ 
+ 
+