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

Tailwind Typography Classes Reference

Convert CSS typography rules to Tailwind utility classes. This reference covers font-size, font-weight, line-height, letter-spacing, text-align, text-decoration, and text-transform conversions.

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

Font Size Scale

Tailwind maps font sizes to a semantic scale: text-xs (0.75rem/12px), text-sm (0.875rem/14px), text-base (1rem/16px), text-lg (1.125rem/18px), text-xl (1.25rem/20px), text-2xl (1.5rem/24px), up to text-9xl (8rem/128px). Each size includes a default line-height for optimal readability.

Font Weight Classes

CSS font-weight values map to named utilities: 100 → font-thin, 300 → font-light, 400 → font-normal, 500 → font-medium, 600 → font-semibold, 700 → font-bold, 800 → font-extrabold, 900 → font-black. Named values like 'bold' and 'normal' are also supported.

Text Styling Properties

Text alignment: text-left, text-center, text-right, text-justify. Text decoration: underline, line-through, no-underline. Text transform: uppercase, lowercase, capitalize, normal-case. White space: whitespace-nowrap, whitespace-pre, whitespace-pre-wrap. Text overflow: text-ellipsis, text-clip (use with overflow-hidden and whitespace-nowrap for truncation).

Frequently Asked Questions

What Tailwind class is font-size: 14px?

14px (0.875rem) maps to text-sm. The full scale: 12px → text-xs, 14px → text-sm, 16px → text-base, 18px → text-lg, 20px → text-xl, 24px → text-2xl, 30px → text-3xl, 36px → text-4xl.

How do I truncate text in Tailwind?

Use the truncate utility class, which applies overflow: hidden, text-overflow: ellipsis, and white-space: nowrap. For multi-line truncation, use line-clamp-N (e.g., line-clamp-3 for 3 lines).

What is the Tailwind class for letter-spacing?

Tailwind uses tracking- utilities: tracking-tighter (-0.05em), tracking-tight (-0.025em), tracking-normal (0), tracking-wide (0.025em), tracking-wider (0.05em), tracking-widest (0.1em).

Related tools

Tailwind Spacing Classes ReferenceTailwind Flexbox & Grid Classes← All CSS to Tailwind Converter features

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