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

Tailwind Typography Classes to CSS Reference

Tailwind's typography utilities control font size, weight, family, line height, letter spacing, text alignment, decoration, and more. This guide maps each class to its CSS output.

← 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.

Font Size and Line Height

Tailwind's text-* classes set both font-size and a default line-height. For example, text-sm sets font-size: 0.875rem with line-height: 1.25rem. Override the line height with leading-* classes.

/* text-xl */
font-size: 1.25rem;
line-height: 1.75rem;

/* text-4xl leading-tight */
font-size: 2.25rem;
line-height: 2.5rem;
line-height: 1.25; /* leading-tight overrides */

Font Weight and Style

font-thin (100) through font-black (900) map to numeric font-weight values. font-normal is 400, font-semibold is 600, font-bold is 700. italic sets font-style: italic.

/* font-bold italic */
font-weight: 700;
font-style: italic;

/* font-semibold */
font-weight: 600;

Text Transform, Decoration, and Overflow

uppercase, lowercase, and capitalize map directly. underline, line-through, and no-underline control text-decoration-line. truncate is a shorthand that sets overflow: hidden, text-overflow: ellipsis, and white-space: nowrap.

/* uppercase underline */
text-transform: uppercase;
text-decoration-line: underline;

/* truncate */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Frequently Asked Questions

What CSS does text-lg produce?

text-lg sets font-size: 1.125rem (18px) and line-height: 1.75rem (28px).

How do I set a custom font size in Tailwind?

Use arbitrary values with bracket notation: text-[22px] or text-[1.375rem]. The converter outputs these as font-size with the exact value specified.

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