Recipes
Practical, worked patterns for building fluid interfaces with fluidity: type scales, container-scoped components, and Tailwind variants.
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
Build a proportional fluid type scale by sharing a viewport ramp across multiple headings and body text.
Container-based scaling
Scale a card component fluidly to fit any grid layout using container query units.
Combining with Tailwind variants
Layer dark mode, hover states, and breakpoint overrides on top of fluid utilities.