CSS to Tailwind Converter

CSS properties in Tailwind

110 CSS properties, each with every value that has a Tailwind class, read out of Tailwind v4.3.3 at build time. Use these to check a single property, or paste a whole stylesheet into the converter.

Layout

  • display28 classesEvery display value Tailwind supports is its own bare utility — the value is the class name, with no display- prefix.
  • position5 classesThe five position keywords map to bare utilities of the same name; static is the browser default but still has a class, for overriding.
  • top102 classesOffsets share the spacing scale with padding and margin, so top: 8px becomes top-2 on a 0.25rem base.
  • right102 classesThe physical-side offset; Tailwind also ships end-* for the logical equivalent that flips in RTL.
  • bottom102 classesOffsets share the spacing scale with padding and margin, so bottom: 8px becomes bottom-2 on a 0.25rem base.
  • left102 classesThe physical-side offset; Tailwind also ships start-* for the logical equivalent that flips in RTL.
  • inset102 classesThe four-side shorthand becomes inset-*, and the common inset: 0 collapses to inset-0.
  • float5 classesFloat keywords map one-to-one, with float-start and float-end as the direction-aware pair.
  • clear6 classesMirrors float: the same keywords, the same logical clear-start / clear-end additions.
  • visibility3 classesThree keywords, three utilities — note invisible still occupies layout space, unlike hidden which is display: none.
  • z-index12 classesThe default scale is sparse (0, 10, 20, 30, 40, 50); anything else needs an arbitrary value like z-[60].
  • overflow13 classesThe shorthand maps directly, and the per-axis overflow-x-* / overflow-y-* utilities cover the long-hand forms.
  • overflow-x5 classesHorizontal overflow gets its own utility family, most often reached for as overflow-x-auto on a wide table.
  • overflow-y5 classesVertical overflow gets its own utility family, most often reached for as overflow-y-auto on a scrolling pane.
  • box-sizing2 classesTailwind sets border-box globally in its preflight, so box-content is the one you will actually write.
  • isolation2 classesTwo utilities, used to create a stacking context so a blend mode or a z-index stays contained.

Flexbox & Grid

  • flex-direction4 classesDirection is folded into the flex-* family, so flex-direction: column is flex-col — you still need flex alongside it.
  • flex-wrap3 classesThree wrap keywords become flex-wrap, flex-wrap-reverse and flex-nowrap.
  • flex-grow2 classesOnly 0 and 1 have named utilities; any other growth factor needs an arbitrary value like grow-[2].
  • flex-shrink2 classesOnly 0 and 1 have named utilities, and shrink-0 is the one that stops a flex child collapsing.
  • flex-basis61 classesBasis draws on the spacing scale plus a set of fractions, so flex-basis: 50% becomes basis-1/2.
  • flex30 classesThe shorthand has a handful of named forms (flex-1, flex-auto, flex-initial, flex-none); anything else becomes arbitrary.
  • order26 classesInteger order values 1-12 have utilities, plus order-first, order-last and order-none.
  • align-items8 classesBecomes the items-* family, where align-items: center is the very common items-center.
  • align-self9 classesBecomes the self-* family, for overriding the container alignment on one child.
  • justify-content11 classesBecomes the justify-* family — the main-axis counterpart to items-*.
  • justify-items7 classesBecomes justify-items-*, a grid-only property that sets inline-axis alignment for every cell.
  • justify-self7 classesBecomes justify-self-*, overriding the grid container inline-axis alignment for one item.
  • place-items7 classesThe align/justify shorthand, where place-items-center is the shortest route to centring in a grid.
  • place-content10 classesThe content-distribution shorthand, mapping to place-content-*.
  • gap35 classesGap uses the spacing scale, so gap: 12px becomes gap-3 on the default 0.25rem base.
  • row-gap35 classesThe per-axis gap becomes gap-y-*, which is the axis name Tailwind uses rather than row.
  • column-gap35 classesThe per-axis gap becomes gap-x-*, which is the axis name Tailwind uses rather than column.
  • grid-template-columns14 classesOnly the repeated equal-width forms have utilities: repeat(3, minmax(0, 1fr)) is grid-cols-3, and anything irregular becomes arbitrary.
  • grid-template-rows14 classesMirrors columns: equal-height repeat() tracks become grid-rows-*, bespoke track lists do not.
  • grid-column14 classesSpans map to col-span-* and explicit lines to col-start-* / col-end-*.
  • grid-row14 classesSpans map to row-span-* and explicit lines to row-start-* / row-end-*.
  • grid-auto-flow5 classesBecomes grid-flow-*, including the dense packing variants.
  • grid-auto-columns4 classesBecomes auto-cols-*, covering the auto, min, max and fr keywords.
  • grid-auto-rows4 classesBecomes auto-rows-*, covering the auto, min, max and fr keywords.

Spacing

  • padding35 classesA single value becomes p-* on the spacing scale; the two- and four-value shorthands split into the axis and side utilities.
  • padding-top35 classesBecomes pt-*, one of the four side utilities the padding shorthand expands into.
  • padding-right35 classesBecomes pr-*; the logical equivalent Tailwind also ships is pe-*.
  • padding-bottom35 classesBecomes pb-*, one of the four side utilities the padding shorthand expands into.
  • padding-left35 classesBecomes pl-*; the logical equivalent Tailwind also ships is ps-*.
  • margin70 classesBecomes m-* on the spacing scale, and negative margins keep the sign as a prefix: -m-2.
  • margin-top70 classesBecomes mt-*, and margin-top: auto becomes mt-auto for pushing an item to the bottom of a flex column.
  • margin-right70 classesBecomes mr-*; the logical equivalent Tailwind also ships is me-*.
  • margin-bottom70 classesBecomes mb-*, one of the four side utilities the margin shorthand expands into.
  • margin-left70 classesBecomes ml-*; the logical equivalent Tailwind also ships is ms-*.

Sizing

  • width143 classesWidth draws on the spacing scale, a set of fractions, and viewport keywords, so both w-64 and w-1/3 are ordinary utilities.
  • height135 classesHeight mirrors width, with h-screen for 100vh and h-full for 100%.
  • min-width71 classesBecomes min-w-*, where min-w-0 is the fix for a flex child that refuses to shrink below its content.
  • max-width71 classesBecomes max-w-*, including the named prose widths like max-w-prose and the breakpoint-named sizes.
  • min-height63 classesBecomes min-h-*, with min-h-screen the usual way to make a page fill the viewport.
  • max-height63 classesBecomes max-h-*, drawing on the same spacing scale as height.
  • aspect-ratio3 classesA few named ratios exist (aspect-square, aspect-video); any other ratio is written arbitrarily as aspect-[4/3].

Typography

  • font-size13 classesSizes are named rather than numeric — text-sm, not text-14 — so the scale is a closed set and an off-scale size becomes an arbitrary value.
  • font-weight9 classesNumeric weights map to names, so font-weight: 600 becomes font-semibold.
  • font-family3 classesThree named stacks ship by default — font-sans, font-serif, font-mono — and a custom stack matches only if you have defined it in your theme.
  • font-style2 classesTwo utilities: italic and not-italic.
  • line-height41 classesUnitless leading values map to leading-* names; a length maps to the spacing scale instead.
  • letter-spacing7 classesBecomes the tracking-* family, which is named rather than numeric.
  • text-align6 classesMaps one-to-one, including the logical text-start and text-end.
  • text-transform4 classesBare utilities named after the value: uppercase, lowercase, capitalize, normal-case.
  • text-decoration-line4 classesBare utilities again — underline, line-through, overline, no-underline.
  • text-overflow3 classesThe truncate utility is the one to know: it sets overflow, white-space and text-overflow together.
  • white-space7 classesBecomes the whitespace-* family, where whitespace-nowrap is the usual reason to reach for it.
  • word-break3 classesMaps to break-*, and note wrap-anywhere and break-all behave differently on long unbroken strings.
  • vertical-align8 classesBecomes the align-* family — unrelated to flexbox alignment despite the similar name.
  • list-style-type3 classesThree utilities cover the common cases: list-none, list-disc, list-decimal.
  • color11 classesText colour becomes text-*, which is the same prefix as font size — the palette name is what tells the two apart.

Backgrounds

  • background-color11 classesBecomes bg-* with a palette name; a colour outside the palette is emitted as an arbitrary value.
  • background-size3 classesThree keywords map to bg-auto, bg-cover and bg-contain.
  • background-position9 classesThe nine keyword positions map to bg-*; offsets and percentages become arbitrary values.
  • background-repeat6 classesMaps to the bg-repeat* family, including the per-axis and space / round forms.
  • background-attachment3 classesThree utilities: bg-fixed, bg-local, bg-scroll.
  • background-clip4 classesMaps to bg-clip-*, with bg-clip-text the one used for gradient text.

Borders

  • border-width5 classesWidths are unprefixed numbers and the 1px default is the bare border — so border-2 is a width, not a palette shade.
  • border-style6 classesMaps to border-* style names, which share the border- prefix with widths and colours.
  • border-color11 classesBecomes border-* with a palette name; the same prefix carries width and style, so the suffix disambiguates.
  • border-radius10 classesRadii are named rather than numeric — rounded-lg, not rounded-8 — and the corner and side variants follow the same names.
  • border-collapse2 classesTwo utilities, border-collapse and border-separate, for table borders.
  • border-spacing103 classesUses the spacing scale, with per-axis border-spacing-x-* and border-spacing-y-* forms.
  • outline-width6 classesMirrors border widths: unprefixed numbers, with the bare outline as the 1px default.
  • outline-color11 classesBecomes outline-* with a palette name, most often paired with a focus-visible: variant.

Effects

  • opacity21 classesPercentages become the number: opacity: 0.5 is opacity-50.
  • box-shadow22 classesShadows are named presets, so an exact match depends on your CSS using the same values Tailwind ships — a custom shadow becomes arbitrary.
  • mix-blend-mode18 classesEvery blend mode has a mix-blend-* utility of the same name.
  • filter55 classesEach filter function is its own utility (blur-sm, grayscale, brightness-50) and they compose, so one CSS declaration can become several classes.
  • backdrop-filter73 classesMirrors filter with a backdrop- prefix on every utility, and composes the same way.
  • object-fit5 classesMaps to the object-* family, where object-cover is the usual choice for images.
  • object-position9 classesThe nine keyword positions map to object-*; anything finer becomes an arbitrary value.

Transitions

  • transition-property5 classesNamed bundles rather than raw property lists: transition, transition-colors, transition-opacity and friends.
  • transition-duration8 classesDurations are the millisecond count: transition-duration: 150ms is duration-150.
  • transition-delay8 classesDelays follow the same millisecond convention as durations, as delay-*.
  • transition-timing-function4 classesThe four standard easings map to ease-*; a custom cubic-bezier becomes an arbitrary value.
  • animation5 classesFour named animations ship by default (animate-spin, animate-ping, animate-pulse, animate-bounce); your own keyframes need theme config.

Transforms

  • transform86 classesTailwind splits the shorthand into per-function utilities, so a transform with several functions becomes several classes.
  • translate371 classesUses the spacing scale and fractions, with negative values written as -translate-x-4.
  • rotate18 classesDegree values map directly, with the sign as a prefix: rotate-45, -rotate-45.
  • scale86 classesScale factors become percentages: scale: 1.05 is scale-105.
  • transform-origin9 classesThe nine keyword origins map to origin-*.

Interactivity

  • cursor36 classesEvery standard cursor keyword has a utility of the same name.
  • pointer-events2 classesTwo utilities, most often used as pointer-events-none on a decorative overlay.
  • user-select4 classesFour utilities under the select-* prefix.
  • resize4 classesMaps to the resize* family, where the bare resize means both axes.
  • appearance2 classesTwo utilities; appearance-none is the one used to strip native form styling.
  • scroll-behavior2 classesTwo utilities, scroll-auto and scroll-smooth.
  • table-layout2 classesTwo utilities, table-auto and table-fixed.