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:

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.

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