Processed in your browser. Your data never leaves your device.

Tailwind Flexbox Classes to CSS Reference

Tailwind's flexbox utilities let you build layouts with classes like flex, flex-col, items-center, and justify-between. This guide shows the CSS each class generates.

← Back to tools

Tailwind CSS to CSS Converter

Paste Tailwind utility classes and get the equivalent standard CSS. Supports spacing, layout, typography, borders, transforms, filters, colors, and arbitrary values.

Samples:

Tailwind Classes

CSS Selector:

CSS Output

Paste Tailwind classes to see CSS

Supported Tailwind Classes

Layout

display, position, visibility, overflow, z-index, box-sizing, isolation

Flexbox

flex-direction, wrap, grow, shrink, order, justify, align, self, gap

Grid

grid-cols, grid-rows, col-span, row-span, auto-cols, auto-rows, flow

Spacing

p, px, py, pt/r/b/l, m, mx, my, mt/r/b/l, space-x/y, gap

Sizing

w, h, min-w, max-w, min-h, max-h, basis, screen, full, fractions

Typography

text-size, font-weight/style/family, leading, tracking, text-align/decoration/transform, whitespace, truncate

Borders

border-width/style/radius, rounded, outline, ring

Effects

opacity, shadow, blur, grayscale, invert, sepia, backdrop-blur

Transforms

scale, rotate, translate, skew, origin

Transitions

transition, duration, ease, delay

Colors

text, bg, border, ring, accent, fill, stroke (black/white/transparent/current + arbitrary values)

Misc

cursor, pointer-events, select, resize, appearance, object-fit/position, aspect-ratio, will-change, mix-blend, columns, content, scroll, table, list

About Tailwind CSS to CSS Converter

500+ utility classes — converts layout, spacing, typography, borders, transforms, filters, and more.
Arbitrary values — handles bracket notation like w-[300px] and bg-[#1a1a2e].
Responsive/state prefixes — strips sm:, hover:, dark: etc. and marks them as comments.
Selector input — customize the CSS selector name for the output.
Unrecognized tracking — classes without a mapping are flagged so you can handle them manually.
Everything runs in your browser — no data is sent over the network.

Flex Container Properties

The flex class sets display: flex, while inline-flex sets display: inline-flex. Direction is controlled by flex-row (default) and flex-col. Wrapping uses flex-wrap, flex-nowrap, and flex-wrap-reverse.

/* flex flex-col flex-wrap */
display: flex;
flex-direction: column;
flex-wrap: wrap;

/* inline-flex flex-row-reverse */
display: inline-flex;
flex-direction: row-reverse;

Alignment and Justification

justify-* controls the main axis (justify-content), items-* controls the cross axis (align-items), and self-* overrides alignment for individual items (align-self). content-* controls multi-line alignment (align-content).

/* items-center justify-between */
align-items: center;
justify-content: space-between;

/* self-end */
align-self: flex-end;

Flex Item Properties

flex-1 (flex: 1 1 0%), flex-auto (flex: 1 1 auto), flex-initial (flex: 0 1 auto), and flex-none (flex: none) control how items grow and shrink. grow/grow-0 and shrink/shrink-0 provide fine control.

/* flex-1 */
flex: 1 1 0%;

/* grow-0 shrink */
flex-grow: 0;
flex-shrink: 1;

Frequently Asked Questions

What CSS does 'flex items-center justify-center' produce?

It produces: display: flex; align-items: center; justify-content: center; — the classic centering pattern.

What is the difference between flex-1 and flex-auto?

flex-1 sets flex: 1 1 0% (items share space equally regardless of content size), while flex-auto sets flex: 1 1 auto (items grow but respect their content size as a starting point).

Related Convert Tools

CSS to Tailwind Converter

Convert CSS to Tailwind utility classes instantly — 100+ properties including layout, spacing, typography, borders, and effects

SVG

SVG to JSX Converter

Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread

API

OpenAPI to TypeScript

Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types

ZOD

JSON to Zod Converter

Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields