Text Transform

Utilities for controlling the capitalization and wrapping of text.

Basic Usage
Quick Reference
Whitespace & Wrapping
Responsive Design
Dark Mode
Customizing Theme
Related Documentation

// Uppercase
WText('Hello World', className: 'uppercase')

// Capitalize
WText('hello world', className: 'capitalize')

// Prevent wrapping
WText('Long text that should not wrap...', className: 'whitespace-nowrap')

Basic Usage

Use uppercase and lowercase to force text casing. capitalize converts the first character of each word to uppercase.

WDiv(
  className: 'flex flex-col gap-4',
  children: [
    WText('uppercase text', className: 'uppercase'), // UPPERCASE TEXT
    WText('LOWERCASE TEXT', className: 'lowercase'), // lowercase text
    WText('capitalize this text', className: 'capitalize'), // Capitalize This Text
    WText('Normal Case Text', className: 'normal-case'), // Normal Case Text
  ],
)

Quick Reference

Class	Transform	Description
`uppercase`	Uppercase	Converts all text to uppercase.
`lowercase`	Lowercase	Converts all text to lowercase.
`capitalize`	Capitalize	Capitalizes the first letter of each word.
`normal-case`	None	Resets text transformation (useful for overrides).

Whitespace & Wrapping

Control how text handles whitespace and wrapping using whitespace- utilities.

typography/whitespace_preview Open Preview

// Prevent text from wrapping
WText(
  'This is a long sentence that will not wrap to the next line.',
  className: 'whitespace-nowrap',
)

Class	Wrap	Description
`whitespace-normal`	Yes	Allow text to wrap normally (default).
`whitespace-nowrap`	No	Prevent text from wrapping.
`text-wrap`	Yes	Alias for `whitespace-normal`.
`text-nowrap`	No	Alias for `whitespace-nowrap`.
`text-balance`	Balance	Balances text across lines for better readability.

Responsive Design

Apply transforms or whitespace rules conditionally at different breakpoints.

// Uppercase on mobile, normal case on tablet+
WText('Responsive Text', className: 'uppercase md:normal-case')

// Wrap on mobile, no-wrap on large screens
WText('Responsive Wrap', className: 'whitespace-normal lg:whitespace-nowrap')

Dark Mode

While text transforms rarely change based on theme, you can apply them conditionally if needed.

WText('Dark Mode Text', className: 'normal-case dark:uppercase')

Customizing Theme

Text transform and whitespace utilities are hardcoded in the parser and cannot be customized via WindThemeData.