[Tailwind CSS](/courses/tailwindcss) is a utility-first [CSS](/courses/css) framework that lets you style components by combining small utility classes directly in [JSX](/courses/reactjs). [Next.js](/courses/nextjs) projects created with `create-next-app` can be configured with [Tailwind](/courses/tailwindcss) during project creation. ### Basic Example Instead of writing: ```css .card { padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; } ``` and then: ```jsx

``` Tailwind lets you write: ```tsx

Content

``` ### Common Utilities ```tsx

Learn Next.js

``` Here: ```text text-3xl → font size font-bold → font weight ``` Another example: ```tsx ``` ### Responsive Styling Tailwind supports breakpoint prefixes: ```tsx

...

``` This means: ```text Small screen → 1 column Medium screen → 2 columns Large screen → 3 columns ``` ### State Variants You can style interactions such as hover and focus: ```tsx ``` ### Why Is Tailwind Popular with Next.js? It works well with reusable [React](/courses/reactjs) components because the component's structure and most of its styling live together. For example: ```tsx function Badge({ children }) { return ( {children} ); } ``` ### Tailwind Does Not Replace CSS Knowledge Understanding concepts such as: ```text Flexbox Grid Positioning Specificity Responsive design Typography ``` is still important. Tailwind provides a different way of expressing [CSS](/courses/css) rather than replacing the underlying CSS concepts. ### Interview-Ready Answer Tailwind CSS styles [Next.js](/courses/nextjs) components using utility classes directly in JSX. It provides utilities for layout, spacing, typography, responsive breakpoints, states, and other CSS properties. It works particularly well with reusable React components, but developers still need a solid understanding of normal CSS concepts.