package tw

  1. Overview
  2. Docs
Legend:
Page
Library
Module
Module type
Parameter
Class
Class type
Source

Module Tw.TypographySource

Typography utilities for text and font styling

https://tailwindcss.com/docs/font-size https://tailwindcss.com/docs/font-weight https://tailwindcss.com/docs/font-family https://tailwindcss.com/docs/font-style https://tailwindcss.com/docs/text-align https://tailwindcss.com/docs/text-decoration https://tailwindcss.com/docs/line-height https://tailwindcss.com/docs/letter-spacing https://tailwindcss.com/docs/text-transform https://tailwindcss.com/docs/vertical-align https://tailwindcss.com/docs/list-style-type https://tailwindcss.com/docs/line-clamp https://tailwindcss.com/docs/text-overflow https://tailwindcss.com/docs/word-break

Font Size Utilities

Sourceval text_xs : Utility.t

text_xs sets font-size to extra-small.

Sourceval text_sm : Utility.t

text_sm sets font-size to small.

Sourceval text_base : Utility.t

text_base sets font-size to base.

Sourceval text_lg : Utility.t

text_lg sets font-size to large.

Sourceval text_xl : Utility.t

text_xl sets font-size to extra-large.

Sourceval text_2xl : Utility.t

text_2xl sets font-size to 2× extra-large.

Sourceval text_3xl : Utility.t

text_3xl sets font-size to 3× extra-large.

Sourceval text_4xl : Utility.t

text_4xl sets font-size to 4× extra-large.

Sourceval text_5xl : Utility.t

text_5xl sets font-size to 5× extra-large.

Sourceval text_6xl : Utility.t

text_6xl sets font-size to 6× extra-large.

Sourceval text_7xl : Utility.t

text_7xl sets font-size to 7× extra-large.

Sourceval text_8xl : Utility.t

text_8xl sets font-size to 8× extra-large.

Sourceval text_9xl : Utility.t

text_9xl sets font-size to 9× extra-large.

Sourceval font_thin : Utility.t

font_thin sets font-weight to 100.

Sourceval font_extralight : Utility.t

font_extralight sets font-weight to 200.

Sourceval font_light : Utility.t

font_light sets font-weight to 300.

Sourceval font_normal : Utility.t

font_normal sets font-weight to 400.

Sourceval font_medium : Utility.t

font_medium sets font-weight to 500.

Sourceval font_semibold : Utility.t

font_semibold sets font-weight to 600.

Sourceval font_bold : Utility.t

font_bold sets font-weight to 700.

Sourceval font_extrabold : Utility.t

font_extrabold sets font-weight to 800.

Sourceval font_black : Utility.t

font_black sets font-weight to 900.

Sourceval font_sans : Utility.t

font_sans sets font-family to the sans stack.

Sourceval font_serif : Utility.t

font_serif sets font-family to the serif stack.

Sourceval font_mono : Utility.t

font_mono sets font-family to the monospace stack.

Sourceval italic : Utility.t

italic applies italic style.

Sourceval not_italic : Utility.t

not_italic disables italic style.

Sourceval text_left : Utility.t

text_left aligns text left.

Sourceval text_center : Utility.t

text_center aligns text center.

Sourceval text_right : Utility.t

text_right aligns text right.

Sourceval text_justify : Utility.t

text_justify justifies text.

Sourceval text_start : Utility.t

text_start aligns text to the start (left in LTR, right in RTL).

Sourceval text_end : Utility.t

text_end aligns text to the end (right in LTR, left in RTL).

Sourceval underline : Utility.t

underline underlines text.

Sourceval overline : Utility.t

overline applies an overline decoration.

Sourceval line_through : Utility.t

line_through applies a line-through decoration.

Sourceval no_underline : Utility.t

no_underline removes text decoration.

Sourceval decoration_solid : Utility.t

decoration_solid sets text-decoration-style to solid.

Sourceval decoration_double : Utility.t

decoration_double sets text-decoration-style to double.

Sourceval decoration_dotted : Utility.t

decoration_dotted sets text-decoration-style to dotted.

Sourceval decoration_dashed : Utility.t

decoration_dashed sets text-decoration-style to dashed.

Sourceval decoration_wavy : Utility.t

decoration_wavy sets text-decoration-style to wavy.

Text Decoration Color & Thickness

Sourceval decoration_color : ?shade:int -> Color.color -> Utility.t

decoration_color ?shade color sets text-decoration color.

Sourceval decoration_thickness : int -> Utility.t

decoration_thickness n sets text-decoration thickness to npx.

Sourceval decoration_from_font : Utility.t

decoration_from_font uses the font's default decoration thickness.

Sourceval leading_none : Utility.t

leading_none sets line-height to none.

Sourceval leading_tight : Utility.t

leading_tight sets tight line-height.

Sourceval leading_snug : Utility.t

leading_snug sets snug line-height.

Sourceval leading_normal : Utility.t

leading_normal sets normal line-height.

Sourceval leading_relaxed : Utility.t

leading_relaxed sets relaxed line-height.

Sourceval leading_loose : Utility.t

leading_loose sets loose line-height.

Sourceval leading : int -> Utility.t

leading n sets custom line-height based on the spacing scale.

Whitespace Utilities

Sourceval whitespace_normal : Utility.t

whitespace_normal preserves normal whitespace collapsing and wrapping.

Sourceval whitespace_nowrap : Utility.t

whitespace_nowrap prevents wrapping.

Sourceval whitespace_pre : Utility.t

whitespace_pre preserves whitespace and line breaks.

Sourceval whitespace_pre_line : Utility.t

whitespace_pre_line preserves whitespace but collapses newlines to spaces.

Sourceval whitespace_pre_wrap : Utility.t

whitespace_pre_wrap preserves whitespace and wraps when needed.

Sourceval whitespace_break_spaces : Utility.t

whitespace_break_spaces preserves whitespace with breaking at soft wrap opportunities.

Letter Spacing Utilities

Sourceval tracking_tighter : Utility.t

tracking_tighter decreases letter spacing.

Sourceval tracking_tight : Utility.t

tracking_tight slightly decreases letter spacing.

Sourceval tracking_normal : Utility.t

tracking_normal uses normal letter spacing.

Sourceval tracking_wide : Utility.t

tracking_wide slightly increases letter spacing.

Sourceval tracking_wider : Utility.t

tracking_wider increases letter spacing.

Sourceval tracking_widest : Utility.t

tracking_widest maximally increases letter spacing.

Sourceval uppercase : Utility.t

uppercase transforms text to uppercase.

Sourceval lowercase : Utility.t

lowercase transforms text to lowercase.

Sourceval capitalize : Utility.t

capitalize capitalizes words.

Sourceval normal_case : Utility.t

normal_case resets text transform.

Text Underline Offset

Sourceval underline_offset : int -> Utility.t

underline_offset n sets underline offset to npx.

Sourceval underline_offset_auto : Utility.t

underline_offset_auto sets underline offset to auto.

Sourceval underline_offset_0 : Utility.t

underline_offset_0 sets underline offset to 0.

Sourceval underline_offset_1 : Utility.t

underline_offset_1 sets underline offset to 1px.

Sourceval underline_offset_2 : Utility.t

underline_offset_2 sets underline offset to 2px.

Sourceval underline_offset_4 : Utility.t

underline_offset_4 sets underline offset to 4px.

Sourceval underline_offset_8 : Utility.t

underline_offset_8 sets underline offset to 8px.

Sourceval antialiased : Utility.t

antialiased enables font smoothing (antialiasing).

Sourceval subpixel_antialiased : Utility.t

subpixel_antialiased disables font smoothing (uses subpixel rendering).

Rendering

Vertical Align

Sourceval align_baseline : Utility.t

align_baseline sets vertical-align to baseline.

Sourceval align_top : Utility.t

align_top sets vertical-align to top.

Sourceval align_middle : Utility.t

align_middle sets vertical-align to middle.

Sourceval align_bottom : Utility.t

align_bottom sets vertical-align to bottom.

Sourceval align_text_top : Utility.t

align_text_top sets vertical-align to text-top.

Sourceval align_text_bottom : Utility.t

align_text_bottom sets vertical-align to text-bottom.

Sourceval align_sub : Utility.t

align_sub sets vertical-align to sub.

Sourceval align_super : Utility.t

align_super sets vertical-align to super.

List Style

Sourceval list_none : Utility.t

list_none removes bullets/numbers from lists.

Sourceval list_disc : Utility.t

list_disc uses disc bullets.

Sourceval list_decimal : Utility.t

list_decimal uses decimal numbering.

Sourceval list_inside : Utility.t

list_inside places list markers inside content box.

Sourceval list_outside : Utility.t

list_outside places list markers outside content box.

Sourceval list_image_none : Utility.t

list_image_none removes list-style-image.

Sourceval list_image_url : string -> Utility.t

list_image_url url sets list-style-image to the given URL.

Text Indent

Sourceval indent : float -> Utility.t

indent n sets text-indent to n times the spacing scale (n * 0.25rem). Accepts fractional values like 0.5, 1.5, 2.5, 3.5.

Line Clamp

Sourceval line_clamp : int -> Utility.t

line_clamp n clamps text to n lines (0 disables).

Content

Sourceval content_none : Utility.t

content_none sets content to none. Useful with pseudo-elements when combined with variants.

Sourceval content : string -> Utility.t

content s sets CSS content to the literal text s. Quotes are added automatically for you and the class name uses the Tailwind v4 arbitrary value syntax: content-["s"]. For example, content "→" generates the class content-["→"] and sets content: "→". Use content_none for content: none.

Text Overflow

Sourceval text_ellipsis : Utility.t

text_ellipsis sets text-overflow to ellipsis.

Sourceval text_clip : Utility.t

text_clip sets text-overflow to clip.

Text Wrap

Sourceval text_wrap : Utility.t

text_wrap enables automatic text wrapping.

Sourceval text_nowrap : Utility.t

text_nowrap disables text wrapping.

Sourceval text_balance : Utility.t

text_balance balances text across lines.

Sourceval text_pretty : Utility.t

text_pretty optimizes wrapping for readability.

Word/Overflow Wrap

Sourceval break_normal : Utility.t

break_normal uses normal word-breaking and overflow-wrap.

Sourceval break_words : Utility.t

break_words breaks words as needed (overflow-wrap: break-word).

Sourceval break_all : Utility.t

break_all breaks within words to prevent overflow.

Sourceval break_keep : Utility.t

break_keep keeps words intact (CJK keep-all).

Sourceval overflow_wrap_normal : Utility.t

overflow_wrap_normal uses the browser default overflow wrap behavior.

Sourceval overflow_wrap_anywhere : Utility.t

overflow_wrap_anywhere allows breaks anywhere to prevent overflow.

Sourceval overflow_wrap_break_word : Utility.t

overflow_wrap_break_word breaks long words to prevent overflow.

Hyphens

Sourceval hyphens_none : Utility.t

hyphens_none disables automatic hyphenation.

Sourceval hyphens_manual : Utility.t

hyphens_manual enables manual hyphenation via soft hyphens.

Sourceval hyphens_auto : Utility.t

hyphens_auto enables automatic hyphenation.

Font Stretch

Sourceval font_stretch_ultra_condensed : Utility.t

font_stretch_ultra_condensed uses ultra-condensed font stretch (50%).

Sourceval font_stretch_extra_condensed : Utility.t

font_stretch_extra_condensed uses extra-condensed font stretch (62.5%).

Sourceval font_stretch_condensed : Utility.t

font_stretch_condensed uses condensed font stretch (75%).

Sourceval font_stretch_semi_condensed : Utility.t

font_stretch_semi_condensed uses semi-condensed font stretch (87.5%).

Sourceval font_stretch_normal : Utility.t

font_stretch_normal uses normal font stretch (100%).

Sourceval font_stretch_semi_expanded : Utility.t

font_stretch_semi_expanded uses semi-expanded font stretch (112.5%).

Sourceval font_stretch_expanded : Utility.t

font_stretch_expanded uses expanded font stretch (125%).

Sourceval font_stretch_extra_expanded : Utility.t

font_stretch_extra_expanded uses extra-expanded font stretch (150%).

Sourceval font_stretch_ultra_expanded : Utility.t

font_stretch_ultra_expanded uses ultra-expanded font stretch (200%).

Sourceval font_stretch_percent : int -> Utility.t

font_stretch_percent n sets font stretch to n%.

Numeric Variants

Sourceval normal_nums : Utility.t

normal_nums resets to normal numeric glyphs.

Sourceval ordinal : Utility.t

ordinal enables ordinal markers (e.g., 1st, 2nd).

Sourceval slashed_zero : Utility.t

slashed_zero uses a slashed zero glyph.

Sourceval lining_nums : Utility.t

lining_nums uses lining numeral forms.

Sourceval oldstyle_nums : Utility.t

oldstyle_nums uses old‑style (text) figures.

Sourceval proportional_nums : Utility.t

proportional_nums uses proportional-width numbers.

Sourceval tabular_nums : Utility.t

tabular_nums uses tabular-width numbers.

Sourceval diagonal_fractions : Utility.t

diagonal_fractions uses diagonal fraction glyphs.

Sourceval stacked_fractions : Utility.t

stacked_fractions uses stacked fraction glyphs.

Sourceval default_font_family_var : Cascade.Css.font_family Var.theme

default_font_family_var is the CSS variable for the default font family, referencing --font-sans.

Sourceval default_mono_font_family_var : Cascade.Css.font_family Var.theme

default_mono_font_family_var is the CSS variable for the default monospace font family, referencing --font-mono.

font_sans_var is the CSS variable for the sans-serif font family.

font_serif_var is the CSS variable for the serif font family.

font_mono_var is the CSS variable for the monospace font family.

Sourceval default_font_declarations : Cascade.Css.declaration list

default_font_declarations are the default font variable declarations for the theme layer.

Sourceval default_font_family_declarations : Cascade.Css.declaration list

default_font_family_declarations are the default font-family variable declarations for the theme layer.

Internal types

content_var is the CSS variable for content, used by before/after pseudo-elements. Initial value is empty string.

Early typography handler - priority 22, comes before color utilities. Includes: text sizes, font weights, font families, text alignment, leading, italic, and decoration-color.

Late typography handler - priority 24, comes after color utilities. Includes: underline, tracking, text transform, decoration styles, whitespace, and other text utilities.