[Tailwind CSS](/courses/tailwindcss) uses responsive prefixes to apply styles at different viewport widths. This makes responsive component styling straightforward in [Next.js](/courses/nextjs). ### Responsive Grid Example ```tsx export default function CourseGrid() { return (

); } ``` Conceptually: ```text Base/mobile → one column sm breakpoint and above → two columns lg breakpoint and above → three columns ``` ### Mobile-First Styling [Tailwind](/courses/tailwindcss)'s responsive utilities follow a mobile-first approach. This: ```tsx

Next.js Course

``` means: ```text Default → text-2xl Medium screens and larger → text-4xl ``` The unprefixed class is the base style. ### Responsive Layout Example ```tsx

Content

``` On smaller screens: ```text Sidebar Content ``` are stacked vertically. On larger screens they become a row. ### Hide or Show Elements Responsively ```tsx ``` and: ```tsx ``` ### Avoid Thinking Only in Device Names Breakpoints should respond to where the design needs to change, not assumptions such as: ```text 768px always means tablet ``` Build layouts around available space and component requirements. ### Responsive Design and Server Components Responsive Tailwind classes are handled by [CSS](/courses/css) in the browser. A component does not need to become a Client Component simply to use: ```text md: lg: xl: ``` For example: ```tsx export default function Header() { return (

Header

); } ``` can remain a Server Component. ### Interview-Ready Answer Tailwind CSS uses mobile-first responsive prefixes such as `sm:`, `md:`, and `lg:` to change component styling at different viewport sizes. Responsive utilities are normal [CSS](/courses/css) behavior, so a [Next.js](/courses/nextjs) component does not need `'use client'` simply to respond to screen size.