Tailwind flexbox builder

Dial in flex direction, wrap, justify, align, and gap — preview with real CSS (not scanned Tailwind classes), then copy parent utilities and HTML.

Presets

Container

Direction

Wrap

Justify

Align

Gap

Items

Preview

Preview uses inline flex styles so it works without Tailwind scanning dynamic classes.

Parent classes

Child classes

HTML

Settings sync to the URL (short params only). Everything runs in your browser.

About this tool

Tailwind flex utilities map 1:1 to CSS Flexbox. This builder outputs the class string you paste into markup, while the live preview applies the same layout via inline styles — so you are not fighting Tailwind’s “no dynamic class names” rule in the playground itself.

How to align center vertically using Tailwind
The Tailwind Cheat Sheet
The Flexbox Tutorial
You can’t generate classes dynamically in Tailwind

Related tools

Free books, courses, and software

Get my programming books, course editions, and complete software.

Get the download library →