NextJS Styling and UI Syllabus

What extra setup does styled-components require in the Next.js App Router for correct server-side rendering?

A style registry using ServerStyleSheet / useServerInsertedHTML in a client 'use client' component, plus enabling the compiler.styledComponents flag in next.config.js so styles are collected during SSR and no hydration mismatch occurs.

Which next.config.js compiler flag enables built-in SWC support for styled-components in Next.js?

compiler: { styledComponents: true }.

In styled-components, what does the createGlobalStyle helper do?

It creates a component that injects global CSS (like resets or html/body styles) into the document when rendered, since styled-components are normally scoped.

What is theming in styled-components and which component provides the theme?

Theming supplies a shared theme object (colors, fonts, spacing) to all styled components via the <ThemeProvider theme={theme}> context wrapper.

How does a styled component access values from the theme provided by ThemeProvider?

Through the theme prop injected into interpolations, e.g., color: ${props => props.theme.colors.primary};.

How would you define a simple theme object for styled-components with a primary color and base spacing?

const theme = { colors: { primary: '#0070f3' }, spacing: { base: '8px' } }; then pass it to <ThemeProvider theme={theme}>.

How can a component that is NOT a styled component read the current styled-components theme?

With the useTheme() hook (or the withTheme HOC), which returns the nearest ThemeProvider's theme object.

How do you implement light/dark mode with styled-components ThemeProvider?

Define two theme objects (lightTheme, darkTheme) and switch which one you pass to ThemeProvider based on state; all themed components update automatically.

What is Tailwind CSS and what design philosophy does it follow?

Tailwind is a utility-first CSS framework: you build designs by composing many small single-purpose utility classes (e.g., p-4, flex, text-center) directly in markup rather than writing custom CSS.

Define 'utility-first CSS' as used by Tailwind.

An approach where styling is applied via low-level, single-purpose utility classes (each doing one thing, like margin or color) directly in the HTML, instead of writing semantic component-level CSS rules.

List two commonly cited advantages of the utility-first approach.

You rarely write custom CSS or invent class names; styles stay co-located with markup; unused CSS is purged so bundles stay small; consistent design tokens via a shared scale.

What three Tailwind directives are placed in the main CSS entry file to inject Tailwind's styles?

@tailwind base; @tailwind components; @tailwind utilities; (In Tailwind v4 this is replaced by a single @import "tailwindcss";).

What two config files are typically generated when setting up Tailwind, and by what command?

tailwind.config.js and postcss.config.js, generated by 'npx tailwindcss init -p' (the -p also creates the PostCSS config).

Why is the 'content' array in tailwind.config.js critical?

It lists the file globs Tailwind scans for class names so it can tree-shake/purge unused styles. If a file isn't listed, its utility classes won't be generated in the final CSS.

In Tailwind, what do the numeric suffixes in spacing utilities like p-4 or m-2 represent?

Units on Tailwind's spacing scale, where each unit = 0.25rem (4px). So p-4 = 1rem (16px) padding and m-2 = 0.5rem (8px) margin.

How do you apply a responsive style in Tailwind, e.g., different padding on medium screens and up?

Prefix the utility with a breakpoint name and colon, e.g., md:p-8. Tailwind breakpoints are mobile-first (min-width based): sm, md, lg, xl, 2xl.

What are Tailwind's default breakpoint pixel values for sm, md, lg, xl, and 2xl?

sm = 640px, md = 768px, lg = 1024px, xl = 1280px, 2xl = 1536px.

How do you apply a hover or focus state to a utility class in Tailwind?

Use a state variant prefix, e.g., hover:bg-blue-700 or focus:ring-2. Variants can stack, like md:hover:underline.

What is the recommended way to customize Tailwind's design tokens (colors, fonts, spacing)?

Add them under theme.extend in tailwind.config.js. Using extend adds to the defaults; setting them directly under theme replaces the defaults entirely.

What is the difference between putting a value under 'theme' versus 'theme.extend' in tailwind.config.js?

Keys directly under theme override/replace Tailwind's default scale for that property, whereas keys under theme.extend merge with and add to the existing defaults.

How do you add a custom brand color 'brand' with value #1DA1F2 usable as bg-brand or text-brand?

In tailwind.config.js: theme: { extend: { colors: { brand: '#1DA1F2' } } }. Tailwind then generates bg-brand, text-brand, border-brand, etc.

What is the @apply directive in Tailwind used for?

@apply lets you compose existing utility classes into a custom CSS rule (e.g., .btn { @apply px-4 py-2 rounded bg-blue-500; }), useful for extracting repeated utility patterns.

How do you write an arbitrary/one-off value in Tailwind when no utility exists, e.g., a top of 117px?

Use square-bracket arbitrary value syntax: top-[117px] or bg-[#1da1f2]. This generates the exact value on demand without editing the config.

Which plugin does Tailwind recommend for beautiful default typography on prose content, and how is it enabled?

The @tailwindcss/typography plugin, added to the plugins array in tailwind.config.js; you then apply the 'prose' class to rich text containers.

Compare CSS Modules and styled-components in terms of when styling is resolved.

CSS Modules are resolved at build time into static, hashed CSS files (zero runtime cost). styled-components (classic runtime) generate class names and inject styles at runtime in the browser, enabling dynamic prop-based styling.

Compare Tailwind (utility-first) with CSS-in-JS libraries like styled-components regarding where styles live.

Tailwind applies predefined utility classes directly in markup with (mostly) no custom CSS or runtime; styled-components colocates full CSS in JS tagged templates and can compute styles dynamically from props at runtime.

For dynamic, prop/theme-driven styling, which approach is most natural: CSS Modules, Tailwind, or styled-components? Why?

styled-components, because it can interpolate JavaScript (props, theme, state) directly into the CSS at runtime. CSS Modules and Tailwind are primarily static and need conditional class toggling for dynamic behavior.

Why are CSS Modules and Tailwind often preferred for performance over runtime CSS-in-JS?

They produce static CSS at build time with no runtime style computation or JS bundle overhead, so there's no per-render styling cost or hydration serialization needed.

What tool commonly processes Tailwind, and what role does it play in the build pipeline?

PostCSS. Tailwind runs as a PostCSS plugin that scans content files, generates the needed utility classes, and (with autoprefixer) adds vendor prefixes during the build.

In styled-components, what does the css helper (tagged template) provide versus styled?

The css helper builds a reusable chunk of styles (a fragment) that can be interpolated into multiple styled components or applied conditionally, whereas styled creates an actual renderable component.