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

SQL

SQL to TypeScript/Prisma/Drizzle

Convert SQL CREATE TABLE statements to TypeScript interfaces, Prisma schema, and Drizzle ORM definitions for PostgreSQL, MySQL, and SQLite

BIO

ESLint to Biome Converter

Convert your ESLint config to Biome — maps 100+ rules from core, TypeScript, React, JSX-A11y, and import plugins to biome.json

B64

Base64 Codec

Encode and decode Base64 strings with Unicode support

CLR

Color Converter

Convert colors between HEX, RGB, and HSL formats