Typography

SkyLineCSS - Typography Utility Classes

SkyLineCSS provides a set of utility classes for controlling typography-related styles. These classes allow you to easily apply font families, sizes, styles, weights, spacing, alignment, colors, decorations, and more to your text elements.

Font Family

Classes

  • .font-sans: Sans-serif font family.

  • .font-serif: Serif font family.

  • .font-mono: Monospace font family.

Usage

<div class="font-sans">Sans-serif Font</div>
<div class="font-serif">Serif Font</div>
<div class="font-mono">Monospace Font</div>

Font Size

Classes

  • .text-xs: Extra small font size.

  • .text-sm: Small font size.

  • .text-base: Base font size.

  • .text-lg: Large font size.

  • .text-xl: Extra large font size.

  • .text-2xl: 2x large font size.

  • .text-3xl: 3x large font size.

  • .text-4xl: 4x large font size.

Usage

<div class="text-xs">Extra Small Text</div>
<div class="text-lg">Large Text</div>
<div class="text-4xl">4x Large Text</div>

Font Smoothing

Classes

  • .font-smooth: Enable font smoothing.

Usage

<div class="font-smooth">Smooth Font</div>

Font Style

Classes

  • .italic: Italic font style.

Usage

<div class="italic">Italic Text</div>

Font Weight

Classes

  • .font-thin: Thin font weight.

  • .font-light: Light font weight.

  • .font-normal: Normal font weight.

  • .font-medium: Medium font weight.

  • .font-semibold: Semi-bold font weight.

  • .font-bold: Bold font weight.

  • .font-extrabold: Extra bold font weight.

  • .font-black: Black font weight.

Usage

<div class="font-thin">Thin Font</div>
<div class="font-bold">Bold Font</div>
<div class="font-black">Black Font</div>

Font Variant Numeric

Classes

  • .font-ordinal: Enable ordinal font variants.

  • .font-slashed-zero: Enable slashed zero font variants.

Usage

<div class="font-ordinal">1st</div>
<div class="font-slashed-zero">0</div>

Letter Spacing

Classes

  • .tracking-tight: Tight letter spacing.

  • .tracking-normal: Normal letter spacing.

  • .tracking-wide: Wide letter spacing.

Usage

<div class="tracking-tight">Tight Letter Spacing</div>
<div class="tracking-wide">Wide Letter Spacing</div>

Line Clamp

Classes

  • .line-clamp-2: Clamp text to 2 lines.

  • .line-clamp-3: Clamp text to 3 lines.

  • .line-clamp-4: Clamp text to 4 lines.

Usage

<div class="line-clamp-2">Clamp Text to 2 Lines</div>
<div class="line-clamp-4">Clamp Text to 4 Lines</div>

Line Height

Classes

  • .leading-none: No extra line height.

  • .leading-tight: Tight line height.

  • .leading-normal: Normal line height.

  • .leading-loose: Loose line height.

Usage

<div class="leading-tight">Tight Line Height</div>
<div class="leading-loose">Loose Line Height</div>

List Style Image

Classes

  • .list-none: No list style image.

  • .list-disc: Bulleted list style.

  • .list-decimal: Numbered list style.

Usage

<ul class="list-disc">
  <li>Bullet Point 1</li>
  <li>Bullet Point 2</li>
</ul>

<ol class="list-decimal">
  <li>Numbered Point 1</li>
  <li>Numbered Point 2</li>
</ol>

List Style Position

Classes

  • .list-inside: List marker inside the list item.

  • .list-outside: List marker outside the list item.

Usage

<ul class="list-outside">
  <li>List Item 1</li>
  <li>List Item 2</li>
</ul>

<ol class="list-inside">
  <li>List Item A</li>
  <li>List Item B</li>
</ol>

List Style Type

Classes

  • .list-none: No list style.

  • .list-disc: Disc list style.

  • .list-decimal: Decimal list style.

  • .list-square: Square list style.

Usage

<ul

 class="list-square">
  <li>Square Point 1</li>
  <li>Square Point 2</li>
</ul>

<ol class="list-decimal">
  <li>Decimal Point 1</li>
  <li>Decimal Point 2</li>
</ol>

Text Align

Classes

  • .text-left: Left-aligned text.

  • .text-center: Center-aligned text.

  • .text-right: Right-aligned text.

  • .text-justify: Justified text.

Usage

<div class="text-left">Left Aligned Text</div>
<div class="text-right">Right Aligned Text</div>

Text Color

Classes

  • .text-black: Black text color.

  • .text-white: White text color.

  • .text-gray: Gray text color.

  • .text-red: Red text color.

  • .text-blue: Blue text color.

  • .text-green: Green text color.

Usage

<div class="text-red">Red Text</div>
<div class="text-blue">Blue Text</div>

Text Decoration

Classes

  • .underline: Underline text.

  • .line-through: Line through text.

  • .no-underline: No underline.

Usage

<div class="underline">Underlined Text</div>
<div class="line-through">Line Through Text</div>

Text Decoration Color

Classes

  • .underline-black: Black underline.

  • .underline-white: White underline.

  • .underline-gray: Gray underline.

Usage

<div class="underline-black">Black Underline</div>
<div class="underline-gray">Gray Underline</div>

Text Decoration Style

Classes

  • .underline-dashed: Dashed underline.

  • .underline-dotted: Dotted underline.

  • .underline-double: Double underline.

Usage

<div class="underline-dashed">Dashed Underline</div>
<div class="underline-double">Double Underline</div>

Text Decoration Thickness

Classes

  • .underline-thin: Thin underline.

  • .underline-medium: Medium underline.

  • .underline-thick: Thick underline.

Usage

<div class="underline-thin">Thin Underline</div>
<div class="underline-thick">Thick Underline</div>

Text Underline Offset

Classes

  • .underline-offset: Offset underline.

Usage

<div class="underline-offset">Offset Underline</div>

Text Transform

Classes

  • .uppercase: Uppercase text.

  • .lowercase: Lowercase text.

  • .capitalize: Capitalize text.

Usage

<div class="uppercase">UPPERCASE TEXT</div>
<div class="lowercase">lowercase text</div>

Text Overflow

Classes

  • .overflow-ellipsis: Ellipsis overflow.

  • .overflow-clip: Clip overflow.

Usage

<div class="overflow-ellipsis">Long Text with Ellipsis Overflow</div>
<div class="overflow-clip">Long Text with Clip Overflow</div>

Text Wrap

Classes

  • .whitespace-normal: Normal text wrap.

  • .whitespace-nowrap: No wrap text.

  • .whitespace-pre: Preformatted text.

Usage

<div class="whitespace-normal">Normal Text Wrap</div>
<div class="whitespace-nowrap">No Wrap Text</div>

Text Indent

Classes

  • .indent: Text indentation.

Usage

<div class="indent">Indented Text</div>

Vertical Align

Classes

  • .align-baseline: Baseline vertical alignment.

  • .align-top: Top vertical alignment.

  • .align-middle: Middle vertical alignment.

  • .align-bottom: Bottom vertical alignment.

Usage

<div class="align-top">Top Aligned Text</div>
<div class="align-middle">Middle Aligned Text</div>

Whitespace

Classes

  • .whitespace-normal: Normal whitespace.

  • .whitespace-nowrap: No whitespace.

Usage

<div class="whitespace-nowrap">No Whitespace</div>
<div class="whitespace-normal">Normal Whitespace</div>

Word Break

Classes

  • .break-normal: Normal word break.

  • .break-words: Break words.

  • .break-all: Break all.

Usage

<div class="break-words">LongWordLongWordLongWordLongWord</div>

Hyphens

Classes

  • .hyphens-none: No hyphenation.

  • .hyphens-auto: Auto hyphenation.

Usage

<div class="hyphens-auto">Hyphenated Text</div>

Content

Classes

  • .content-center: Centered content.

Usage

<div class="content-center">Centered Content</div>
PreviousTables

Last updated