# Tailwind CSS Integration Configuration

## Overview
DesignFast使用Tailwind CSS CDN进行快速原型开发。这个配置文件定义了如何集成和使用Tailwind CSS。

## CDN Integration

### Production CDN
```html
<script src="https://cdn.tailwindcss.com"></script>
```

### Custom Configuration
```html
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#3B82F6',
          secondary: '#10B981',
          neutral: '#6B7280',
          danger: '#EF4444',
          warning: '#F59E0B',
          success: '#10B981'
        },
        fontFamily: {
          sans: ['Inter', 'system-ui', 'sans-serif'],
          mono: ['Fira Code', 'monospace']
        },
        spacing: {
          '128': '32rem',
          '144': '36rem'
        },
        borderRadius: {
          '4xl': '2rem'
        }
      }
    }
  }
</script>
```

## Responsive Breakpoints

```javascript
const breakpoints = {
  sm: '640px',   // 手机横屏和小平板
  md: '768px',   // 平板
  lg: '1024px',  // 小笔记本
  xl: '1280px',  // 桌面
  '2xl': '1536px' // 大屏幕
};
```

## Mobile-First Classes

### Layout
```html
<!-- 移动：垂直堆叠，桌面：水平排列 -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- 移动：全宽，桌面：固定宽度 -->
<div class="w-full md:w-1/2 lg:w-1/3">Content</div>
```

### Typography
```html
<!-- 响应式字号 -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">Heading</h1>
<p class="text-sm md:text-base lg:text-lg">Paragraph</p>
```

### Spacing
```html
<!-- 响应式内边距 -->
<div class="p-4 md:p-6 lg:p-8">Content</div>

<!-- 响应式外边距 -->
<div class="m-2 md:m-4 lg:m-6">Content</div>
```

## Accessibility-First Utilities

### Focus States
```html
<!-- 明显的焦点指示器 -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Button
</button>

<!-- 键盘导航友好 -->
<a href="#" class="focus-visible:ring-2 focus-visible:ring-blue-500">
  Link
</a>
```

### Screen Reader Only
```html
<!-- 仅对屏幕阅读器可见 -->
<span class="sr-only">Additional context for screen readers</span>
```

### Color Contrast
```javascript
// 确保AA级别对比度
const contrastPairs = {
  'text-gray-900': 'bg-white',      // 15.05:1
  'text-gray-800': 'bg-gray-100',   // 9.73:1
  'text-white': 'bg-blue-600',      // 4.56:1
  'text-white': 'bg-gray-900'       // 15.05:1
};
```

## Component Patterns

### Button
```html
<!-- Primary Button -->
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors" style="min-height: 44px; min-width: 44px;">
  Click Me
</button>

<!-- Secondary Button -->
<button class="bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" style="min-height: 44px; min-width: 44px;">
  Secondary
</button>
```

### Card
```html
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow">
  <h3 class="text-xl font-semibold mb-2">Card Title</h3>
  <p class="text-gray-600">Card content goes here.</p>
</div>
```

### Form Input
```html
<input 
  type="text" 
  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
  style="min-height: 44px;">
```

### Navigation
```html
<nav class="bg-white shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex space-x-4">
        <a href="#" class="inline-flex items-center px-3 py-2 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
          Home
        </a>
        <a href="#" class="inline-flex items-center px-3 py-2 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
          Products
        </a>
      </div>
    </div>
  </div>
</nav>
```

## Performance Optimization

### JIT Mode (Production)
For production builds, use Tailwind CLI with JIT mode:

```bash
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
```

### PurgeCSS Configuration
```javascript
// tailwind.config.js for production
module.exports = {
  content: [
    './workspace/prototypes/**/*.html',
    './src/templates/**/*.hbs'
  ],
  // ... other config
}
```

### CSS File Size Target
- Development (CDN): ~3.5MB (acceptable for prototyping)
- Production (purged): < 5KB per component

## Dark Mode Support (Optional)

```html
<!-- System preference -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content adapts to system theme
</div>

<!-- Manual toggle -->
<script>
  if (localStorage.theme === 'dark') {
    document.documentElement.classList.add('dark')
  }
</script>
```

## Utility Aliases

```javascript
// Common patterns
const utilityAliases = {
  'btn-primary': 'bg-primary text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500',
  'card': 'bg-white rounded-lg shadow-md p-6',
  'input': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary',
  'link': 'text-primary hover:text-blue-700 underline focus:ring-2 focus:ring-blue-500'
};
```

## Constitutional Compliance

✅ **Mobile-First**: All classes use mobile-first approach
✅ **Accessibility**: Focus states, SR-only utilities, contrast compliance
✅ **Performance**: CDN for prototyping, purge for production (< 5KB)
✅ **Responsive**: Built-in breakpoint system
✅ **File-Based**: Configuration embedded in HTML or separate config file