GLM-Tools-Skills-Agents/frontend-ui-ux-design/css-frameworks

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuration

// 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

npm install bootstrap

<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

npm install foundation-sites

Bulma

URL: https://bulma.io

npm install bulma

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

---

🔧 CSS-in-JS Libraries

Styled Components

URL: https://styled-components.com

npm install styled-components

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

npm install @emotion/react @emotion/styled

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

npm install @vanilla-extract/css

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

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

Stitches

URL: https://stitches.dev

npm install @stitches/react

---

🌊 CSS Reset/Normalize

Modern CSS Reset

/* 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

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