React Tutorial #14: Styling with Tailwind CSS v4 and shadcn/ui
In the previous tutorial, you fetched data with TanStack Query. Now let’s make things look good with Tailwind CSS v4 and shadcn/ui. What is Tailwind CSS? Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes, you apply small utility classes directly in your HTML/JSX. // Without Tailwind <button className="my-button">Click</button> /* CSS: .my-button { padding: 8px 16px; background: blue; color: white; border-radius: 4px; } */ // With Tailwind <button className="px-4 py-2 bg-blue-500 text-white rounded">Click</button> No context switching between files. No naming things. No CSS specificity problems. ...