typography

Typography utilities for Tailwind CSS

Font Family

Utilities for controlling the font family of an element:

FontFamily


def FontFamily(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

Font family options for controlling typography.

Exported source 
class FontFamily(str, Enum):
    """Font family options for controlling typography."""
    SANS = "sans"
    SERIF = "serif"
    MONO = "mono"

font_family = enums_to_simple_factory("font", [FontFamily], "Utilities for controlling the font family of an element.") # Font family utilities

test_typography_font_family_examples


def test_typography_font_family_examples(
    
):

Test font family utilities.

Exported source 
def test_typography_font_family_examples():
    """Test font family utilities."""
    assert str(font_family.sans) == "font-sans"
    assert str(font_family.serif) == "font-serif"
    assert str(font_family.mono) == "font-mono"

# Run the tests
test_typography_font_family_examples()

Font Size

Utilities for controlling the font size of an element.

test_typography_font_size_examples


def test_typography_font_size_examples(
    
):

Test font size utilities.

Exported source 
font_size = ScaledFactory('text', FONT_SIZE_CONFIG, "Utilities for controlling the font size of an element.") # Font size factory
Exported source 
def test_typography_font_size_examples():
    """Test font size utilities."""
    assert str(font_size.xs) == "text-xs"
    assert str(font_size.sm) == "text-sm"
    assert str(font_size.base) == "text-base"
    assert str(font_size.lg) == "text-lg"
    assert str(font_size.xl) == "text-xl"
    assert str(font_size._2xl) == "text-2xl"
    assert str(font_size._3xl) == "text-3xl"
    assert str(font_size._4xl) == "text-4xl"
    assert str(font_size._5xl) == "text-5xl"
    assert str(font_size._6xl) == "text-6xl"
    assert str(font_size._7xl) == "text-7xl"
    assert str(font_size._8xl) == "text-8xl"
    assert str(font_size._9xl) == "text-9xl"

# Run the tests
test_typography_font_size_examples()

Font Smoothing

Utilities for controlling the font smoothing of an element:

test_typography_font_smoothing_examples


def test_typography_font_smoothing_examples(
    
):

Test font smoothing utilities.

Exported source 
antialiased = SingleValueFactory("antialiased", "Applies antialiased font smoothing") # Antialiased font smoothing
subpixel_antialiased = SingleValueFactory("subpixel-antialiased", "Applies subpixel antialiased font smoothing") # Subpixel antialiased font smoothing
Exported source 
def test_typography_font_smoothing_examples():
    """Test font smoothing utilities."""
    assert str(antialiased) == "antialiased"
    assert str(subpixel_antialiased) == "subpixel-antialiased"

# Run the tests
test_typography_font_smoothing_examples()

Font Style

Utilities for controlling the style of text:

test_typography_font_style_examples


def test_typography_font_style_examples(
    
):

Test font style utilities.

Exported source 
italic = SingleValueFactory("italic", "Sets font style to italic") # Italic font style
not_italic = SingleValueFactory("not-italic", "Sets font style to normal") # Normal font style
Exported source 
def test_typography_font_style_examples():
    """Test font style utilities."""
    assert str(italic) == "italic"
    assert str(not_italic) == "not-italic"

# Run the tests
test_typography_font_style_examples()

Font Weight

Utilities for controlling the font weight of an element:

FontWeight


def FontWeight(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

Font weight options from thin to black.

Exported source 
class FontWeight(str, Enum):
    """Font weight options from thin to black."""
    THIN = "thin"
    EXTRALIGHT = "extralight"
    LIGHT = "light"
    NORMAL = "normal"
    MEDIUM = "medium"
    SEMIBOLD = "semibold"
    BOLD = "bold"
    EXTRABOLD = "extrabold"
    BLACK = "black"

font_weight = enums_to_simple_factory("font", [FontWeight], "Utilities for controlling the font weight of an element.") # Font weight utilities

test_typography_font_weight_examples


def test_typography_font_weight_examples(
    
):

Test font weight utilities.

Exported source 
def test_typography_font_weight_examples():
    """Test font weight utilities."""
    # Named weights
    assert str(font_weight.thin) == "font-thin"
    assert str(font_weight.extralight) == "font-extralight"
    assert str(font_weight.light) == "font-light"
    assert str(font_weight.normal) == "font-normal"
    assert str(font_weight.medium) == "font-medium"
    assert str(font_weight.semibold) == "font-semibold"
    assert str(font_weight.bold) == "font-bold"
    assert str(font_weight.extrabold) == "font-extrabold"
    assert str(font_weight.black) == "font-black"

# Run the tests
test_typography_font_weight_examples()

Font Stretch

Utilities for selecting the width of a font face:

FontStretch


def FontStretch(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

Font stretch options for controlling font width.

Exported source 
class FontStretch(str, Enum):
    """Font stretch options for controlling font width."""
    ULTRA_CONDENSED = "ultra-condensed"
    EXTRA_CONDENSED = "extra-condensed"
    CONDENSED = "condensed"
    SEMI_CONDENSED = "semi-condensed"
    NORMAL = "normal"
    SEMI_EXPANDED = "semi-expanded"
    EXPANDED = "expanded"
    EXTRA_EXPANDED= "extra-expanded"
    ULRA_EXPANDED = "ultra-expanded"

font_stretch = enums_to_simple_factory("font-stretch", [FontStretch], "Utilities for selecting the width of a font face.") # Font stretch utilities

test_typography_font_stretch_examples


def test_typography_font_stretch_examples(
    
):

Test font stretch utilities.

Exported source 
def test_typography_font_stretch_examples():
    """Test font stretch utilities."""
    assert str(font_stretch.ultra_condensed) == "font-stretch-ultra-condensed"
    assert str(font_stretch.extra_condensed) == "font-stretch-extra-condensed"
    assert str(font_stretch.condensed) == "font-stretch-condensed"
    assert str(font_stretch.semi_condensed) == "font-stretch-semi-condensed"
    assert str(font_stretch.normal) == "font-stretch-normal"
    assert str(font_stretch.semi_expanded) == "font-stretch-semi-expanded"
    assert str(font_stretch.expanded) == "font-stretch-expanded"
    assert str(font_stretch.extra_expanded) == "font-stretch-extra-expanded"
    assert str(font_stretch.ultra_expanded) == "font-stretch-ultra-expanded"

# Run the tests
test_typography_font_stretch_examples()

Font Variant Numeric

Utilities for controlling the variant of numbers.

test_typography_font_variant_numeric_examples


def test_typography_font_variant_numeric_examples(
    
):

Test font variant numeric utilities.

Exported source 
# Font variant numeric utilities
normal_nums = SingleValueFactory("normal-nums", "Normal numeric font variant") # Normal numbers
ordinal = SingleValueFactory("ordinal", "Ordinal numeric markers") # Ordinal numbers
slashed_zero = SingleValueFactory("slashed-zero", "Force zero with slash") # Slashed zero
lining_nums = SingleValueFactory("lining-nums", "Lining figures") # Lining numbers
oldstyle_nums = SingleValueFactory("oldstyle-nums", "Old-style figures") # Old-style numbers
proportional_nums = SingleValueFactory("proportional-nums", "Proportional figures") # Proportional numbers
tabular_nums = SingleValueFactory("tabular-nums", "Tabular figures") # Tabular numbers
diagonal_fractions = SingleValueFactory("diagonal-fractions", "Diagonal fractions") # Diagonal fractions
stacked_fractions = SingleValueFactory("stacked-fractions", "Stacked fractions") # Stacked fractions
Exported source 
def test_typography_font_variant_numeric_examples():
    """Test font variant numeric utilities."""
    assert str(normal_nums) == "normal-nums"
    assert str(ordinal) == "ordinal"
    assert str(slashed_zero) == "slashed-zero"
    assert str(lining_nums) == "lining-nums"
    assert str(oldstyle_nums) == "oldstyle-nums"
    assert str(proportional_nums) == "proportional-nums"
    assert str(tabular_nums) == "tabular-nums"
    assert str(diagonal_fractions) == "diagonal-fractions"
    assert str(stacked_fractions) == "stacked-fractions"

# Run the tests
test_typography_font_variant_numeric_examples()

Letter Spacing

Utilities for controlling the tracking (letter spacing) of an element:

test_typography_spacing_examples


def test_typography_spacing_examples(
    
):

Test letter spacing utilities.

Exported source 
# Letter spacing config
TRACKING_CONFIG = ScaleConfig(
    numeric=False,
    decimals=False,
    fractions=False,
    named=[
        NamedScale("tighter", "--tracking-tighter", "-0.05em"),
        NamedScale("tight", "--tracking-tight", "-0.025em"),
        NamedScale("normal", "--tracking-normal", "0em"),
        NamedScale("wide", "--tracking-wide", "0.025em"),
        NamedScale("wider", "--tracking-wider", "0.05em"),
        NamedScale("widest", "--tracking-widest", "0.1em")
    ],
    special={},
    negative=False
)

tracking = ScaledFactory("tracking", TRACKING_CONFIG, "Letter spacing utilities for controlling tracking") # Letter spacing factory
Exported source 
def test_typography_spacing_examples():
    """Test letter spacing utilities."""
    # Letter spacing
    assert str(tracking.tighter) == "tracking-tighter"
    assert str(tracking.tight) == "tracking-tight"
    assert str(tracking.normal) == "tracking-normal"
    assert str(tracking.wide) == "tracking-wide"
    assert str(tracking.wider) == "tracking-wider"
    assert str(tracking.widest) == "tracking-widest"
    assert str(tracking("0.05em")) == "tracking-[0.05em]"
    assert str(tracking("--custom-tracking")) == "tracking-(--custom-tracking)"

# Run the tests
test_typography_spacing_examples()

Line Clamp

Utilities for clamping text to a specific number of lines:

test_typography_line_clamp_examples


def test_typography_line_clamp_examples(
    
):

Test line clamp utilities.

Exported source 
def test_typography_line_clamp_examples():
    """Test line clamp utilities."""
        
    # Line clamp
    assert str(line_clamp.none) == "line-clamp-none"
    assert str(line_clamp(1)) == "line-clamp-1"
    assert str(line_clamp(2)) == "line-clamp-2"
    assert str(line_clamp(3)) == "line-clamp-3"
    assert str(line_clamp(4)) == "line-clamp-4"
    assert str(line_clamp(5)) == "line-clamp-5"
    assert str(line_clamp(6)) == "line-clamp-6"
    assert str(line_clamp("[10]")) == "line-clamp-[10]"

# Run the tests
test_typography_line_clamp_examples()

Line Height

Utilities for controlling the leading (line height) of an element:

test_typography_line_height_examples


def test_typography_line_height_examples(
    
):

Test line height utilities.

Exported source 
def test_typography_line_height_examples():
    """Test line height utilities."""
    # Line height
    assert str(leading.none) == "leading-none"
    assert str(leading(3)) == "leading-3"
    assert str(leading(4)) == "leading-4"
    assert str(leading(5)) == "leading-5"
    assert str(leading(6)) == "leading-6"
    assert str(leading(7)) == "leading-7"
    assert str(leading(8)) == "leading-8"
    assert str(leading(9)) == "leading-9"
    assert str(leading(10)) == "leading-10"
    assert str(leading("1.5")) == "leading-[1.5]"
    assert str(leading("20px")) == "leading-[20px]"
    assert str(leading("--custom-leading")) == "leading-(--custom-leading)"

# Run the tests
test_typography_line_height_examples()

List Style

Utilities for controlling list styles:

List Style Image

Utilities for controlling the marker images for list items:

ListImageFactory


def ListImageFactory(
    
):

Factory for list-style-image utilities.

ListImageUtility


def ListImageUtility(
    prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):

Utility class for list-style-image with arbitrary value support.

test_typography_list_image_examples


def test_typography_list_image_examples(
    
):

Test list style image utilities.

Exported source 
def test_typography_list_image_examples():
    """Test list style image utilities."""
    assert str(list_image.none) == "list-image-none"
    assert str(list_image("url(/path/to/marker.svg)")) == "list-image-[url(/path/to/marker.svg)]"
    assert str(list_image("--custom-marker")) == "list-image-(--custom-marker)"
    assert str(list_image("url('star.png')")) == "list-image-[url('star.png')]"

# Run the tests
test_typography_list_image_examples()

List Style Position and Type

ListStylePosition


def ListStylePosition(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

List marker position options.

Exported source 
class ListStylePosition(str, Enum):
    """List marker position options."""
    INSIDE = "inside"
    OUTSIDE = "outside"

list_position = enums_to_simple_factory("list", [ListStylePosition], "Utilities for controlling the position of bullets and numbers in lists.") # List position factory

ListStyleType


def ListStyleType(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

List marker type options.

Exported source 
class ListStyleType(str, Enum):
    """List marker type options."""
    DISC = "disc"
    DECIMAL = "decimal"
    NONE = "none"

list_style = enums_to_simple_factory("list", [ListStyleType], "Utilities for controlling the marker style of a list.") # List type factory

test_typography_list_styles_examples


def test_typography_list_styles_examples(
    
):

Test list styles utilities.

Exported source 
def test_typography_list_styles_examples():
    """Test list styles utilities."""
    
    # List styles
    assert str(list_position.inside) == "list-inside"
    assert str(list_position.outside) == "list-outside"
    assert str(list_style.disc) == "list-disc"
    assert str(list_style.decimal) == "list-decimal"
    assert str(list_style.none) == "list-none"

# Run the tests
test_typography_list_styles_examples()

Text Alignment

Utilities for controlling the alignment of text:

TextAlign


def TextAlign(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

Text alignment options.

Exported source 
class TextAlign(str, Enum):
    """Text alignment options."""
    LEFT = "left"
    CENTER = "center"
    RIGHT = "right"
    JUSTIFY = "justify"
    START = "start"
    end = "end"

text_align = enums_to_simple_factory("text", [TextAlign], "Utilities for controlling the alignment of text.") # Text alignment factory

test_typography_text_alignment_examples


def test_typography_text_alignment_examples(
    
):

Test text alignment utilities.

Exported source 
def test_typography_text_alignment_examples():
    """Test text alignment utilities."""
    # Text alignment
    assert str(text_align.left) == "text-left"
    assert str(text_align.center) == "text-center"
    assert str(text_align.right) == "text-right"
    assert str(text_align.justify) == "text-justify"
    assert str(text_align.start) == "text-start"
    assert str(text_align.end) == "text-end"

# Run the tests
test_typography_text_alignment_examples()

Text Color

Utilities for controlling the text color of an element.

test_typography_text_color_examples


def test_typography_text_color_examples(
    
):

Test text color utilities.

Exported source 
def test_typography_text_color_examples():
    """Test text color utilities."""
    # Standard colors
    assert str(text_color.red._500) == "text-red-500"
    assert str(text_color.blue._300) == "text-blue-300"
    assert str(text_color.green._600) == "text-green-600"

    # Test all 22 color families
    assert str(text_color.red._500) == "text-red-500"
    assert str(text_color.orange._500) == "text-orange-500"
    assert str(text_color.amber._500) == "text-amber-500"
    assert str(text_color.yellow._500) == "text-yellow-500"
    assert str(text_color.lime._500) == "text-lime-500"
    assert str(text_color.green._500) == "text-green-500"
    assert str(text_color.emerald._500) == "text-emerald-500"
    assert str(text_color.teal._500) == "text-teal-500"
    assert str(text_color.cyan._500) == "text-cyan-500"
    assert str(text_color.sky._500) == "text-sky-500"
    assert str(text_color.blue._500) == "text-blue-500"
    assert str(text_color.indigo._500) == "text-indigo-500"
    assert str(text_color.violet._500) == "text-violet-500"
    assert str(text_color.purple._500) == "text-purple-500"
    assert str(text_color.fuchsia._500) == "text-fuchsia-500"
    assert str(text_color.pink._500) == "text-pink-500"
    assert str(text_color.rose._500) == "text-rose-500"
    assert str(text_color.slate._500) == "text-slate-500"
    assert str(text_color.gray._500) == "text-gray-500"
    assert str(text_color.zinc._500) == "text-zinc-500"
    assert str(text_color.neutral._500) == "text-neutral-500"
    assert str(text_color.stone._500) == "text-stone-500"
    
    # Special colors
    assert str(text_color.transparent) == "text-transparent"
    assert str(text_color.black) == "text-black"
    assert str(text_color.white) == "text-white"
    assert str(text_color.current) == "text-current"
    assert str(text_color.inherit) == "text-inherit"
    
    # With opacity
    assert str(text_color.red._500.opacity(50)) == "text-red-500/50"
    assert str(text_color.blue._300.opacity(75)) == "text-blue-300/75"
    
    # Arbitrary values
    assert str(text_color("#ff0000")) == "text-[#ff0000]"
    assert str(text_color("rgb(255, 0, 0)")) == "text-[rgb(255, 0, 0)]"
    assert str(text_color("--custom-color")) == "text-(--custom-color)"

# Run the tests
test_typography_text_color_examples()

Text Decoration

Text Decoration Line

Utilities for controlling the decoration of text:

Text Decoration Color

Utilities for controlling the color of text decorations:

Text Decoration Style

Utilities for controlling the style of text decorations:

DecorationStyle


def DecorationStyle(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

Text decoration style options.

Exported source 
class DecorationStyle(str, Enum):
    """Text decoration style options."""
    SOLID = "solid"
    DOUBLE = "double"
    DOTTED = "dotted"
    DASHED = "dashed"
    WAVY = "wavy"

decoration_style = enums_to_simple_factory("decoration", [DecorationStyle], "Utilities for controlling the style of text decorations.") # Text decoration style factory

Text Decoration Thickness

Utilities for controlling the thickness of text decorations:

test_typography_text_decoration_examples


def test_typography_text_decoration_examples(
    
):

Test text decoration utilities.

Exported source 
def test_typography_text_decoration_examples():
    """Test text decoration utilities."""
    # Decoration lines
    assert str(underline) == "underline"
    assert str(overline) == "overline"
    assert str(line_through) == "line-through"
    assert str(no_underline) == "no-underline"
    
    # Decoration colors
    assert str(decoration_color.red._500) == "decoration-red-500"
    assert str(decoration_color.blue._300) == "decoration-blue-300"
    assert str(decoration_color.inherit) == "decoration-inherit"
    assert str(decoration_color.current) == "decoration-current"
    assert str(decoration_color.transparent) == "decoration-transparent"

    # Test all 22 color families
    assert str(decoration_color.red._500) == "decoration-red-500"
    assert str(decoration_color.orange._500) == "decoration-orange-500"
    assert str(decoration_color.amber._500) == "decoration-amber-500"
    assert str(decoration_color.yellow._500) == "decoration-yellow-500"
    assert str(decoration_color.lime._500) == "decoration-lime-500"
    assert str(decoration_color.green._500) == "decoration-green-500"
    assert str(decoration_color.emerald._500) == "decoration-emerald-500"
    assert str(decoration_color.teal._500) == "decoration-teal-500"
    assert str(decoration_color.cyan._500) == "decoration-cyan-500"
    assert str(decoration_color.sky._500) == "decoration-sky-500"
    assert str(decoration_color.blue._500) == "decoration-blue-500"
    assert str(decoration_color.indigo._500) == "decoration-indigo-500"
    assert str(decoration_color.violet._500) == "decoration-violet-500"
    assert str(decoration_color.purple._500) == "decoration-purple-500"
    assert str(decoration_color.fuchsia._500) == "decoration-fuchsia-500"
    assert str(decoration_color.pink._500) == "decoration-pink-500"
    assert str(decoration_color.rose._500) == "decoration-rose-500"
    assert str(decoration_color.slate._500) == "decoration-slate-500"
    assert str(decoration_color.gray._500) == "decoration-gray-500"
    assert str(decoration_color.zinc._500) == "decoration-zinc-500"
    assert str(decoration_color.neutral._500) == "decoration-neutral-500"
    assert str(decoration_color.stone._500) == "decoration-stone-500"
    
    # Decoration styles
    assert str(decoration_style.solid) == "decoration-solid"
    assert str(decoration_style.double) == "decoration-double"
    assert str(decoration_style.dotted) == "decoration-dotted"
    assert str(decoration_style.dashed) == "decoration-dashed"
    assert str(decoration_style.wavy) == "decoration-wavy"
    
    # Decoration thickness
    assert str(decoration_thickness(0)) == "decoration-0"
    assert str(decoration_thickness(1)) == "decoration-1"
    assert str(decoration_thickness(2)) == "decoration-2"
    assert str(decoration_thickness(4)) == "decoration-4"
    assert str(decoration_thickness(8)) == "decoration-8"
    assert str(decoration_thickness.auto) == "decoration-auto"
    assert str(decoration_thickness.from_font) == "decoration-from-font"
    assert str(decoration_thickness("3px")) == "decoration-[3px]"
    assert str(decoration_thickness("--line-thickness")) == "decoration-(--line-thickness)"

# Run the tests
test_typography_text_decoration_examples()

Text Underline Offset

Utilities for controlling the offset of a text underline:

test_typography_underline_offset_examples


def test_typography_underline_offset_examples(
    
):

Test underline offset utilities.

Exported source 
def test_typography_underline_offset_examples():
    """Test underline offset utilities."""    
    # Underline offset
    assert str(underline_offset(0)) == "underline-offset-0"
    assert str(underline_offset(1)) == "underline-offset-1"
    assert str(underline_offset(2)) == "underline-offset-2"
    assert str(underline_offset(4)) == "underline-offset-4"
    assert str(underline_offset(8)) == "underline-offset-8"
    assert str(underline_offset.auto) == "underline-offset-auto"
    assert str(underline_offset.negative(1)) == "-underline-offset-1"
    assert str(underline_offset.negative(2)) == "-underline-offset-2"
    assert str(underline_offset("3px")) == "underline-offset-[3px]"

# Run the tests
test_typography_underline_offset_examples()

Text Transform

Utilities for controlling the capitalization of text:

test_typography_text_transform_examples


def test_typography_text_transform_examples(
    
):

Test text transform utilities.

Exported source 
def test_typography_text_transform_examples():
    """Test text transform utilities."""    
    # Text transform
    assert str(uppercase) == "uppercase"
    assert str(lowercase) == "lowercase"
    assert str(capitalize) == "capitalize"
    assert str(normal_case) == "normal-case"

# Run the tests
test_typography_text_transform_examples()

Text Overflow

Utilities for controlling text overflow in an element:

test_typography_text_overflow_examples


def test_typography_text_overflow_examples(
    
):

Test text overflow utilities.

Exported source 
def test_typography_text_overflow_examples():
    """Test text overflow utilities."""
    # Text overflow
    assert str(truncate) == "truncate"
    assert str(text_ellipsis) == "text-ellipsis"
    assert str(text_clip) == "text-clip"

# Run the tests
test_typography_text_overflow_examples()

Text Wrap

Utilities for controlling how text wraps within an element:

test_typography_text_wrap_examples


def test_typography_text_wrap_examples(
    
):

Test text wrap utilities.

Exported source 
def test_typography_text_wrap_examples():
    """Test text wrap utilities."""
    
    # Text wrap
    assert str(text_wrap) == "text-wrap"
    assert str(text_nowrap) == "text-nowrap"
    assert str(text_balance) == "text-balance"
    assert str(text_pretty) == "text-pretty"

# Run the tests
test_typography_text_wrap_examples()

Text Indent

Utilities for controlling text indentation:

test_typography_text_indent_examples


def test_typography_text_indent_examples(
    
):

Test text indent utilities.

Exported source 
def test_typography_text_indent_examples():
    """Test text indent utilities."""
        
    # Text indent
    assert str(indent(0)) == "indent-0"
    assert str(indent(4)) == "indent-4"
    assert str(indent(8)) == "indent-8"
    assert str(indent.px) == "indent-px"
    assert str(indent.negative(4)) == "-indent-4"
    assert str(indent("10px")) == "indent-[10px]"

# Run the tests
test_typography_text_indent_examples()

Vertical Align

Utilities for controlling vertical alignment:

test_typography_vertical_align_examples


def test_typography_vertical_align_examples(
    
):

Test vertical align utilities.

Exported source 
def test_typography_vertical_align_examples():
    """Test vertical align utilities."""
    
    # Vertical align
    assert str(align.baseline) == "align-baseline"
    assert str(align.top) == "align-top"
    assert str(align.middle) == "align-middle"
    assert str(align.bottom) == "align-bottom"
    assert str(align.text_top) == "align-text-top"
    assert str(align.text_bottom) == "align-text-bottom"
    assert str(align.sub) == "align-sub"
    assert str(align.super) == "align-super"

# Run the tests
test_typography_vertical_align_examples()

White Space

Utilities for controlling an element’s white-space property:

test_typography_whitespace_examples


def test_typography_whitespace_examples(
    
):

Test whitespace utilities.

Exported source 
def test_typography_whitespace_examples():
    """Test whitespace utilities."""
    
    # White space
    assert str(whitespace.normal) == "whitespace-normal"
    assert str(whitespace.nowrap) == "whitespace-nowrap"
    assert str(whitespace.pre) == "whitespace-pre"
    assert str(whitespace.pre_line) == "whitespace-pre-line"
    assert str(whitespace.pre_wrap) == "whitespace-pre-wrap"
    assert str(whitespace.break_spaces) == "whitespace-break-spaces"

# Run the tests
test_typography_whitespace_examples()

Word Break

Utilities for controlling word breaks in an element:

test_typography_word_break_examples


def test_typography_word_break_examples(
    
):

Test word break utilities.

Exported source 
def test_typography_word_break_examples():
    """Test word break utilities."""
    
    # Word break
    assert str(break_normal) == "break-normal"
    assert str(break_all) == "break-all"
    assert str(break_keep) == "break-keep"

# Run the tests
test_typography_word_break_examples()

Overflow Wrap

Utilities for controlling line breaks within words:

test_typography_overflow_wrap_examples


def test_typography_overflow_wrap_examples(
    
):

Test overflow wrap utilities.

Exported source 
def test_typography_overflow_wrap_examples():
    """Test overflow wrap utilities."""
    
    # Overflow wrap
    assert str(wrap_break_word) == "wrap-break-word"
    assert str(wrap_anywhere) == "wrap-anywhere"
    assert str(wrap_normal) == "wrap-normal"

# Run the tests
test_typography_overflow_wrap_examples()

Hyphens

Utilities for controlling how words should be hyphenated:

test_typography_hyphens_examples


def test_typography_hyphens_examples(
    
):

Test hyphens utilities.

Exported source 
def test_typography_hyphens_examples():
    """Test hyphens utilities."""
    
    # Hyphens
    assert str(hyphens.none) == "hyphens-none"
    assert str(hyphens.manual) == "hyphens-manual"
    assert str(hyphens.auto) == "hyphens-auto"

# Run the tests
test_typography_hyphens_examples()

Content

Utilities for controlling the content of the before and after pseudo-elements:

ContentFactory


def ContentFactory(
    
):

Factory for content utilities for pseudo-elements.

ContentUtility


def ContentUtility(
    prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):

Utility class for content with arbitrary value support.

test_typography_content_examples


def test_typography_content_examples(
    
):

Test content utilities for pseudo-elements.

Exported source 
def test_typography_content_examples():
    """Test content utilities for pseudo-elements."""
    assert str(content.none) == "content-none"
    assert str(content("'Hello'")) == "content-['Hello']"
    assert str(content('"→"')) == 'content-["→"]'
    assert str(content("attr(data-label)")) == "content-[attr(data-label)]"
    assert str(content("--custom-content")) == "content-(--custom-content)"
    assert str(content("open-quote")) == "content-[open-quote]"
    assert str(content("' (' attr(href) ')'")) == "content-[' (' attr(href) ')']"

# Run the tests
test_typography_content_examples()

Practical Examples

Let’s see how to use these typography utilities in real FastHTML components:

test_typography_fasthtml_examples


def test_typography_fasthtml_examples(
    
):

Test typography utilities in practical FastHTML component examples.

Exported source 
def test_typography_fasthtml_examples():
    """Test typography utilities in practical FastHTML component examples."""
    from fasthtml.common import H1, H2, P, Div, Span, A, Ul, Li, Blockquote
    from cjm_fasthtml_tailwind.utilities.sizing import max_w
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.borders import rounded, border, border_color
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    
    # Heading with multiple typography utilities
    heading = H1(
        "Welcome to Our Site",
        cls=combine_classes(
            font_size._4xl,
            font_weight.bold,
            text_color.gray._900,
            tracking.tight,
            leading(8)
        )
    )
    assert "text-4xl" in heading.attrs['class']
    assert "font-bold" in heading.attrs['class']
    assert "text-gray-900" in heading.attrs['class']
    assert "tracking-tight" in heading.attrs['class']
    assert "leading-8" in heading.attrs['class']
    
    # Paragraph with text styling
    paragraph = P(
        "This is a sample paragraph with various text styles applied.",
        cls=combine_classes(
            font_size.base,
            text_color.gray._600,
            leading(7),
            text_align.justify
        )
    )
    assert "text-base" in paragraph.attrs['class']
    assert "text-gray-600" in paragraph.attrs['class']
    
    # Link with underline and hover effects
    link = A(
        "Click here",
        href="#",
        cls=combine_classes(
            text_color.blue._600,
            underline,
            decoration_style.dotted,
            decoration_thickness(2),
            font_weight.medium
        )
    )
    assert "text-blue-600" in link.attrs['class']
    assert "underline" in link.attrs['class']
    assert "decoration-dotted" in link.attrs['class']
    
    # Truncated text
    truncated = Div(
        "This is a very long text that should be truncated with an ellipsis when it overflows the container width.",
        cls=combine_classes(truncate, max_w.xs)
    )
    assert "truncate" in truncated.attrs['class']
    
    # Multi-line clamp
    clamped = P(
        "This is a longer paragraph that spans multiple lines. It will be clamped to show only 3 lines with an ellipsis at the end if the content exceeds that limit.",
        cls=str(line_clamp(3))
    )
    assert clamped.attrs['class'] == "line-clamp-3"
    
    # Code block with monospace font
    code = Div(
        "const greeting = 'Hello, World!';",
        cls=combine_classes(
            font_family.mono,
            font_size.sm,
            text_color.gray._800,
            whitespace.pre,
            bg.gray._100,
            p(4),
            rounded()
        )
    )
    assert "font-mono" in code.attrs['class']
    assert "whitespace-pre" in code.attrs['class']
    
    # List with custom styles
    custom_list = Ul(
        Li("First item"),
        Li("Second item"),
        Li("Third item"),
        cls=combine_classes(
            list_style.disc,
            list_position.inside,
            text_color.gray._700
        )
    )
    assert "list-disc" in custom_list.attrs['class']
    assert "list-inside" in custom_list.attrs['class']
    
    # Text with transform
    transformed = Span(
        "uppercase text",
        cls=combine_classes(uppercase, tracking.wider)
    )
    assert "uppercase" in transformed.attrs['class']
    assert "tracking-wider" in transformed.attrs['class']
    
    # Blockquote with indent
    quote = Blockquote(
        "The only way to do great work is to love what you do.",
        cls=combine_classes(
            font_size.lg,
            italic,
            text_color.gray._600,
            indent(8),
            border.l._4,
            border_color.gray._300,
            p.l(4)
        )
    )
    assert "text-lg" in quote.attrs['class']
    assert "italic" in quote.attrs['class']
    assert "indent-8" in quote.attrs['class']

    return Div(
        heading,
        paragraph,
        link,
        truncated,
        clamped,
        code,
        custom_list,
        transformed,
        quote,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_typography_fasthtml_examples()

Welcome to Our Site

This is a sample paragraph with various text styles applied.

Click here
This is a very long text that should be truncated with an ellipsis when it overflows the container width.

This is a longer paragraph that spans multiple lines. It will be clamped to show only 3 lines with an ellipsis at the end if the content exceeds that limit.

const greeting = 'Hello, World!';
  • First item
  • Second item
  • Third item
uppercase text
The only way to do great work is to love what you do.
test_func = test_typography_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Export