# CSS Frameworks Reference

Comprehensive guide to CSS frameworks, utilities, and styling approaches.

---

## 🚀 Utility-First Frameworks

### Tailwind CSS (Primary Recommendation)

**URL:** https://tailwindcss.com
**Version:** 4.x (2025)
**License:** MIT

#### Why Tailwind CSS
- **Utility-First** - Build designs directly in markup
- **No Runtime** - Purged CSS is tiny (~10KB)
- **Highly Customizable** - Extend everything
- **Dark Mode** - Built-in dark mode support
- **Responsive** - Mobile-first breakpoints
- **JIT Compiler** - On-demand style generation

#### Installation
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

#### Configuration
```javascript
// tailwind.config.js
export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
    },
  },
  plugins: [],
}
```

#### Core Concepts

| Concept | Syntax | Example |
|---------|--------|---------|
| **Spacing** | `{property}-{size}` | `p-4`, `mt-8`, `mx-auto` |
| **Colors** | `{property}-{color}-{shade}` | `bg-blue-500`, `text-gray-100` |
| **Typography** | `text-{size}`, `font-{weight}` | `text-xl`, `font-bold` |
| **Flexbox** | `flex`, `items-{align}`, `justify-{align}` | `flex items-center justify-between` |
| **Grid** | `grid`, `grid-cols-{n}` | `grid grid-cols-3 gap-4` |
| **Responsive** | `{breakpoint}:{class}` | `md:flex`, `lg:grid-cols-4` |
| **States** | `{state}:{class}` | `hover:bg-blue-600`, `focus:ring-2` |
| **Dark Mode** | `dark:{class}` | `dark:bg-gray-900` |

---

### Other Utility Frameworks

| Framework | URL | Description |
|-----------|-----|-------------|
| **UnoCSS** | https://unocss.dev | Instant on-demand CSS |
| **Windi CSS** | https://windicss.org | Tailwind alternative (EOL) |
| **Tachyons** | https://tachyons.io | Functional CSS |
| **Atomic CSS** | https://acss.io | Atomized CSS |

---

## 🎨 Component-Based Frameworks

### Bootstrap

**URL:** https://getbootstrap.com
**Version:** 5.x

```bash
npm install bootstrap
```

```html
<button class="btn btn-primary">Primary</button>
<div class="card">
  <div class="card-body">Content</div>
</div>
```

### Foundation

**URL:** https://get.foundation
**Version:** 6.x

```bash
npm install foundation-sites
```

### Bulma

**URL:** https://bulma.io

```bash
npm install bulma
```

```html
<button class="button is-primary">Primary</button>
<div class="box">Content</div>
```

---

## 🔧 CSS-in-JS Libraries

### Styled Components

**URL:** https://styled-components.com

```bash
npm install styled-components
```

```javascript
import styled from 'styled-components';

const Button = styled.button`
  background: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

  &:hover {
    background: #2563eb;
  }
`;
```

### Emotion

**URL:** https://emotion.sh

```bash
npm install @emotion/react @emotion/styled
```

```javascript
import styled from '@emotion/styled';
import { css } from '@emotion/react';

const style = css`
  color: hotpink;
`;

const Button = styled.button`
  background: #3b82f6;
  padding: 0.5rem 1rem;
`;
```

### Vanilla Extract

**URL:** https://vanilla-extract.style

```bash
npm install @vanilla-extract/css
```

```typescript
// styles.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: '#3b82f6',
  padding: '0.5rem 1rem',
});
```

### Stitches

**URL:** https://stitches.dev

```bash
npm install @stitches/react
```

---

## 🌊 CSS Reset/Normalize

### Modern CSS Reset

```css
/* Josh Comeau's reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
```

### Normalize.css

```bash
npm install normalize.css
```

### Preflight (Tailwind)

Built into Tailwind CSS - automatically normalizes styles.

---

## 📊 Comparison Table

| Framework | Approach | Bundle Size | Learning Curve | Customization |
|-----------|----------|-------------|----------------|---------------|
| **Tailwind** | Utility-first | ~10KB | Medium | Excellent |
| **Bootstrap** | Component-based | ~150KB | Easy | Good |
| **Styled** | CSS-in-JS | ~12KB | Medium | Excellent |
| **Emotion** | CSS-in-JS | ~8KB | Medium | Excellent |
| **CSS Modules** | Scoped CSS | 0 | Easy | Good |
| **Vanilla Extract** | Zero-runtime | 0 | Medium | Excellent |

---

## 🎯 Selection Guide

### Choose Tailwind CSS when:
- Want rapid prototyping
- Prefer utility-first approach
- Need small production bundle
- Building with React/Vue/Next.js
- Want dark mode out of box

### Choose CSS-in-JS when:
- Building component library
- Need dynamic styling
- Want scoped styles
- Using React ecosystem
- Need theme switching

### Choose Bootstrap when:
- Need quick start
- Want pre-built components
- Building traditional websites
- Team is familiar with it

### Choose CSS Modules when:
- Want scoped styles without JS
- Building with Next.js (built-in)
- Prefer standard CSS syntax
- Don't need runtime theming

---

## 🔗 Related Skills

- **ui-ux-pro-max** - Design guidelines
- **component-libraries** - UI components
- **zai-tooling-reference** - Tailwind + Next.js patterns

---

*Last updated: 2026-02-13*