Setting the file. One moment.
Skill 07 · Stitch::extract Design Md
Subchapter 7.3
references/react-tailwind.mdMarkdown4 KBView on GitHub
This reference covers the most common frontend stack: React components with Tailwind CSS (and optionally CSS Modules, styled-components, or Emotion).
Read these files in priority order — higher-priority files give you the intended design system, lower-priority files show what actually shipped:
tailwind.config.js / tailwind.config.ts — The single most
important file. Custom theme.extend.colors, fontFamily, spacing,
borderRadius, and screens are the design system definition.
globals.css / global.css / index.css — CSS custom properties
(--*), @layer directives, @font-face declarations, and base styles.
theme.ts / theme.js / tokens.ts — Explicit design token files.
May export objects consumed by Tailwind config or CSS-in-JS providers.
src/app/layout.tsx or src/App.tsx — Root layout. Shows the global
font setup (via next/font or <link>), body background, and overall
structure.
Component files (*.tsx / *.jsx) — Look at 5-8 representative
components to understand usage patterns.
The Tailwind config is structured and machine-readable. Extract directly:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#294056', // → "Deep Muted Teal-Navy" — Primary CTA
background: '#FCFAFA', // → "Warm Barely-There Cream" — Page BG
},
fontFamily: {
sans: ['Manrope', 'sans-serif'],
},
borderRadius: {
card: '12px',
button: '8px',
},
spacing: {
section: '5rem',
}
}
}
}Map each custom value to a descriptive name and role.
Look for :root or html blocks in global CSS:
:root {
--color-primary: #294056;
--color-bg: #FCFAFA;
--font-heading: 'Manrope', sans-serif;
--radius-card: 12px;
--spacing-section: 5rem;
}These are explicitly declared tokens — use their names as clues for their intended role.
Next.js uses next/font for optimized font loading:
import { Inter, Playfair_Display } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-display' })The variable names hint at usage: --font-display for headlines,
--font-inter for body.
Don’t read every component. Focus on these archetypes:
| Component Type | What to Extract |
|---|---|
| Layout / Shell | Max-width, padding, grid structure |
| Button / CTA | Border radius, colors, hover states, padding |
| Card | Shadow, border, radius, internal spacing |
| Nav / Header | Typography treatment, active states |
| Form / Input | Border, focus state, padding |
| Hero / Landing section | Spacing, typography scale, alignment |
For each, look at the className prop for Tailwind classes or the
styled() / css() calls for CSS-in-JS values.
If the project uses CSS-in-JS, look for theme providers:
// ThemeProvider wrapping the app
const theme = {
colors: {
primary: '#294056',
background: '#FCFAFA',
},
fonts: {
heading: 'Manrope, sans-serif',
},
radii: {
card: '12px',
button: '8px',
}
}This theme object is the design system. Extract directly.
If the project uses Chakra UI, Material UI, Ant Design, or shadcn/ui:
extendTheme() calls — these override defaults.createTheme() — palette, typography, and spacing overrides.ConfigProvider theme prop or theme.ts overrides.globals.css.
Check components.json for the style configuration.The overrides are the design system — default values are the library’s generic styling and should be noted but not emphasized.
Check Tailwind’s screens config and look for responsive class prefixes
(sm:, md:, lg:, xl:) in components:
screens: {
sm: '640px', // Mobile landscape
md: '768px', // Tablet
lg: '1024px', // Desktop
xl: '1280px', // Large desktop
'2xl': '1536px'
}Look for container configuration and max-width patterns on layout
components to determine content width strategy.