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.

~~~