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

Tailwind Flexbox & Grid Classes Reference

Flexbox and Grid are the backbone of modern CSS layouts. Convert your CSS layout rules to Tailwind utility classes with the converter above, or use this reference to learn the mappings.

← Back to tools

CSS to Tailwind Converter

Paste CSS rules or inline styles and get the equivalent Tailwind CSS utility classes. Supports 100+ CSS properties including layout, spacing, typography, borders, and more.

Samples:

CSS Input

Tailwind Output

Paste CSS to see Tailwind classes

Supported CSS Properties

Layout

display, position, top/right/bottom/left, inset, z-index, overflow, visibility, box-sizing

Flexbox

flex-direction, flex-wrap, flex, flex-grow, flex-shrink, order, justify-content, align-items, align-self, align-content

Grid

grid-template-columns, grid-template-rows, gap, row-gap, column-gap, place-content, place-items

Spacing

padding (all sides), margin (all sides), width, height, min/max width/height

Typography

font-size, font-weight, font-style, font-family, line-height, letter-spacing, text-align, text-decoration, text-transform, white-space, word-break, text-overflow, vertical-align

Colors

color, background-color, border-color (named + hex black/white)

Borders

border, border-width, border-style, border-radius, outline, outline-offset

Effects

opacity, box-shadow, cursor, pointer-events, user-select, transition, transform, mix-blend-mode, will-change

Misc

object-fit, object-position, aspect-ratio, resize, appearance, scroll-behavior, list-style, table-layout, border-collapse, columns, content, isolation, accent-color

About CSS to Tailwind Converter

100+ properties — converts layout, spacing, typography, borders, effects, and more.
Full selectors — handles class rules, ID rules, or bare inline style declarations.
Shorthand parsing — expands padding, margin, and border shorthands into individual Tailwind classes.
Unconverted tracking — properties without a direct Tailwind equivalent are flagged so you know what needs custom CSS.
Everything runs in your browser — no data is sent over the network.

CSS Flexbox to Tailwind

The core flex properties map directly: display: flex → flex, flex-direction: column → flex-col, flex-wrap: wrap → flex-wrap, justify-content: center → justify-center, align-items: center → items-center. Flex shorthand works too: flex: 1 1 0% → flex-1, flex: none → flex-none. Grow and shrink have dedicated classes: flex-grow: 1 → grow, flex-shrink: 0 → shrink-0.

CSS Grid to Tailwind

Grid template columns use the pattern grid-cols-N: grid-template-columns: repeat(3, 1fr) → grid-cols-3. Gap converts directly: gap: 1.5rem → gap-6, with row-gap and column-gap mapping to gap-y and gap-x respectively. Place utilities like place-content-center and place-items-center handle the less common alignment properties.

Common Layout Patterns

Centered flex container: 'display: flex; align-items: center; justify-content: center' → 'flex items-center justify-center'. Responsive grid: use responsive prefixes like 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'. Sticky header: 'position: sticky; top: 0; z-index: 50' → 'sticky top-0 z-50'.

Frequently Asked Questions

What is the Tailwind class for justify-content: space-between?

justify-between. Other justify-content values: flex-start → justify-start, center → justify-center, flex-end → justify-end, space-around → justify-around, space-evenly → justify-evenly.

How do I make a responsive grid in Tailwind?

Use responsive prefixes: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'. This creates a 1-column layout on mobile, 2 columns on tablets, and 3 columns on desktops.

Related Convert Tools

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

GQL

GraphQL to TypeScript

Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations