Content
Typography
Core

Automatic spacing

Use component classes to space reset automatically on :first-child and :last-child.

SyntaxMixinVariantsDescription
Utility.xt-mt-autoxt-mt-autoresponsiveReset margin top on :first-child
Utility.xt-mb-autoxt-mb-autoresponsiveReset margin bottom on :last-child
Utility.xt-my-autoxt-my-autoresponsiveReset margin top on :first-child and bottom on :last-child

Variant

Use Tailwind CSS to assign styles (e.g. text-color, text-opacity).

Text styles on parent elements are applied when inerithed.

See link variant to style links.

Headers

You can use headers classes or tags with customizable styles.

To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags h1...h6 are automatically styled when they don't have [class]. You can customize components check xtendui/src/typography.css.js for default styles.

SyntaxMixinVariantsDescription
Utilityh1 or .xt-h1xt-h1responsiveTag styles
Utilityh2 or .xt-h2xt-h2responsiveTag styles
Utilityh3 or .xt-h3xt-h3responsiveTag styles
Utilityh4 or .xt-h4xt-h4responsiveTag styles
Utilityh5 or .xt-h5xt-h5responsiveTag styles
Utilityh6 or .xt-h6xt-h6responsiveTag styles

Use Tailwind CSS to assign custom headers (e.g. font-size, line-height, letter-spacing).

Remember to override text line height with responsive leading.

Paragraph

You can use paragraph classes or tags with customizable styles.

To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags p are automatically styled when they don't have [class]. You can customize components check xtendui/src/typography.css.js for default styles.

SyntaxMixinVariantsDescription
Utilityp or .xt-pxt-presponsiveTag styles

Text

Text tags are styles by Tailwind CSS or component classes.

List

You can use lists classes or tags with customizable styles.

To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags ul and ol are automatically styled when they don't have [class]. You can customize components check xtendui/src/typography.css.js for default styles.

SyntaxMixinVariantsDescription
Utilityul or .xt-ulxt-ulresponsiveTag styles
Utilityol or .xt-olxt-olresponsiveTag styles

Definition List

You can use definition lists classes or tags with customizable styles.

To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags dl are automatically styled when they don't have [class]. You can customize components check xtendui/src/typography.css.js for default styles.

SyntaxMixinVariantsDescription
Utilitydl or .xt-dlxt-dlresponsiveTag styles

Other

You can use figure and figcaption and hr classes or tags with customizable styles.

To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags figure and figcaption are automatically styled when they don't have [class]. You can customize components check xtendui/src/typography.css.js for default styles.

SyntaxMixinVariantsDescription
Utilityfigure or .xt-figurext-figureresponsiveTag styles
Utilityfigcaption or .xt-figcaptionxt-figcaptionresponsiveTag styles
Utilityhr or .xt-hrxt-hrresponsiveTag styles

These are typography's component utilities.

SyntaxMixinVariantsDescription
Utility.xt-text-resetxt-text-resetresponsiveReset text styles
Utility.xt-lowercase-capitalizext-lowercase-capitalizeresponsiveText transform lowercase and capitalize first letter