Tailwind CSS Cookbook
“How would you do X?” — practical, production-ready recipes with the approach, full code, pitfalls and variations.
Tailwind CSS
- Add a dark mode toggleLet users switch between light and dark themes with a button, using Tailwind's dark variant.
- Add breadcrumbs and paginationHelp users see where they are and move between pages of results.
- Build a dashboard layout with a sidebarCreate an app shell with a fixed-width sidebar, a top bar and a scrollable main area that adapts to small screens.
- Build a dropdown menuOpen a small menu of actions from a button, positioned below it and above other content.
- Build a hero section with a gradient headlineCreate an eye-catching landing-page hero with a large headline, supporting text and two call-to-action buttons.
- Build an FAQ accordionShow questions that expand to reveal answers, accessible to keyboard and screen-reader users, with a rotating arrow.
- Build a responsive navbar with a mobile menuShow links in a row on desktop and collapse them into a menu button on phones, without writing JavaScript.
- Create a card with a gradient borderGive a card a colourful gradient border while keeping a solid background inside.
- Create an accessible modal dialogShow a modal with a dimmed backdrop that traps focus and closes with Escape, using as little JavaScript as possible.
- Create a responsive card gridDisplay products or articles in a grid that shows one column on phones and more on larger screens, with equal-height cards.
- Design a pricing table with a highlighted planShow three pricing plans side by side, with the recommended plan visually emphasised and stacked cards on phones.
- Display an overlapping avatar groupShow a row of user avatars that overlap, with a '+N' counter for the rest.
- Keep the footer at the bottom of short pagesMake the footer sit at the bottom of the window when there's little content, and below the content when there's a lot.
- Lay out a two-column settings formBuild a clean, accessible form with labels, help text, inputs side by side on wide screens and stacked on phones.
- Make a responsive data tableDisplay tabular data that stays readable on phones, with a sticky header and zebra rows.
- Make tabs with radio inputs and no JavaScriptSwitch between panels of content with tab buttons, without writing JavaScript.
- Show a skeleton loader while content loadsDisplay a placeholder shape of the content while data is loading, instead of a spinner or empty space.
- Show a toast notificationDisplay a small success or error message in a corner of the screen that doesn't block the page.
- Show progress through a multi-step formIndicate which step of a checkout or onboarding flow the user is on, with completed and upcoming steps.
- Style a toggle switch from a checkboxTurn a checkbox into an accessible on/off switch with a sliding knob.