---
title: Recipes
description: "Practical, worked patterns for building fluid interfaces with fluidity: type scales, container-scoped components, and Tailwind variants."
sidebar:
  label: Overview
  order: 0
---

Fluidity's utilities compose with Tailwind to solve common responsive design challenges without breakpoints or media queries.
Below are real-world patterns you can adapt to your project.

**[Responsive type scale](/recipes/responsive-type-scale)**

Build a proportional fluid type scale by sharing a viewport ramp across multiple headings and body text.

**[Container-based scaling](/recipes/container-based-scaling)**

Scale a card component fluidly to fit any grid layout using container query units.

**[Combining with Tailwind variants](/recipes/combining-with-tailwind-variants)**

Layer dark mode, hover states, and breakpoint overrides on top of fluid utilities.