AEAl-Andalus⺢Experience
Sign in · Join
AEAl-Andalus⺢Experience
ProjectsGalleryAboutArticlesDashboardAPI
© 2026 — Modular content systems☕buy me a coffee
Framework Study Guide
ChaptersCardsLegendRoadmapRoute Map
Chapters
00 · Root Layout01 · Server Page (page.tsx)01a · Special Files (not-found, error, loading)02 · Client Component (UI & Interaction)02a · Client Boundaries & Islands03 · Entity Actions (actions/*.ts)04 · Server Actions ("use server")05 · Context Provider (context/*.tsx)06 · API Route (app/(api)/<entity>/route.ts)07 · TypeScript + Prisma08 · Entity-First Feature Design09 · Deployment, Docker & Cloud10 · Next 16 + Prisma 7 Upgrade11 · Prisma 7 (SQLite-first, App Router)12 · TypeORM (Entities + Migrations)13 · Drizzle ORM (SQL-first)11 · CSS, Mobile-First Flex, Tailwind12 · Libraries, Accelerators & Production Shortcuts14 · Next.js 16: cache, PPR, proxy, AI
→ cards/11-css-tailwind

Chapter

11 · CSS, Mobile-First Flex, Tailwind

Pragmatic styling stack: global CSS tokens, mobile-first flex/grid, and Tailwind when it saves time.

Mental Model

  • Start mobile-first; grow to tablet/desktop with min-width media queries.
  • Use global CSS vars for color/spacing; Tailwind only when it speeds up delivery.
  • Flex for linear flows, grid for complex layouts; keep components layout-agnostic.

Starter Snippets

/* global.css */

:root { --bg:#fff; --ink:#111; --gap:1rem; }

body { margin:0; background:var(--bg); color:var(--ink); }


/* mobile-first */

.stack { display:flex; flex-direction:column; gap:var(--gap); }

@media (min-width:768px) { .stack.row { flex-direction:row; align-items:flex-start; } }


// tailwind.config.js

module.exports = { content: ["./app/**/*.{ts,tsx}"], theme: { extend: {} } };

Rules of Thumb

  • Reserve Tailwind for utility bursts; keep shared tokens in CSS.
  • Avoid coupling components to layout; compose with wrappers.
  • Test on narrow viewports first; add gap/padding tokens before custom values.