Text Style - Skelementor

Overview

Use text-style utilities for simple emphasis and casing changes without extra CSS.

Class	CSS	Typical use
`.uppercase`	`text-transform: uppercase;`	Section labels, badges, navigation
`.lowercase`	`text-transform: lowercase;`	Code identifiers, stylistic headings
`.underline`	`text-decoration: underline;`	Link emphasis, inline callouts
`.no-underline`	`text-decoration: none;`	Remove default link underline
`.italic`	`font-style: italic;`	Quotes, citations, calls to action

Example

<div class="elementor-element flex flex-col gap-2">
  <p class="text-sm uppercase tracking-wide text-gray">
    Release notes
  </p>
  <h3 class="text-3xl font-semibold text-black">
    Version 1.4.0 sharpens the bundled typography system
  </h3>
</div>

Combine .uppercase with .tracking-wide or .tracking-wider to prevent capped text from feeling cramped.

Style Guardrails

Reserve .uppercase for short labels; long uppercase paragraphs quickly lose readability.
Use .no-underline alongside a hover state (e.g. .underline on hover) so links remain discoverable.
Italic text can appear faint at lighter weights—bump to .font-medium or higher if contrast is low.

Inline emphasis should come from utility classes, not manual HTML elements. This keeps your Elementor global styles consistent and easy to audit.