> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Alignment

> Apply semantic alignment utilities that respect document direction and layout context.

export const TextStartDemo = () => <div className="not-prose my-6">
    <div className="tw-demo">
      <span className="tw-label">.text-start</span>
      <div style={{
  display: "flex",
  justifyContent: "flex-start"
}}>
        <p className="tw-text-left" style={{
  margin: 0,
  maxWidth: "18rem",
  width: "100%",
  fontSize: "0.875rem",
  lineHeight: 1.65,
  color: "var(--demo-fg-muted)"
}}>
          So I started to walk into the water. I won't lie to you boys, I was
          terrified. But I pressed on, and as I made my way past the breakers a
          strange calm came over me.
        </p>
      </div>
    </div>
  </div>;

export const TextEndDemo = () => <div className="not-prose my-6">
    <div className="tw-demo">
      <span className="tw-label">.text-end</span>
      <div style={{
  display: "flex",
  justifyContent: "flex-end"
}}>
        <p className="tw-text-right" style={{
  margin: 0,
  maxWidth: "18rem",
  width: "100%",
  fontSize: "0.875rem",
  lineHeight: 1.65,
  color: "var(--demo-fg-muted)"
}}>
          So I started to walk into the water. I won't lie to you boys, I was
          terrified. But I pressed on, and as I made my way past the breakers a
          strange calm came over me.
        </p>
      </div>
    </div>
  </div>;

export const TextCenterDemo = () => <div className="not-prose my-6">
    <div className="tw-demo">
      <span className="tw-label">.text-center</span>
      <div style={{
  display: "flex",
  justifyContent: "center"
}}>
        <p className="tw-text-center" style={{
  margin: 0,
  maxWidth: "18rem",
  width: "100%",
  fontSize: "0.875rem",
  lineHeight: 1.65,
  color: "var(--demo-fg-muted)"
}}>
          So I started to walk into the water. I won't lie to you boys, I was
          terrified. But I pressed on, and as I made my way past the breakers a
          strange calm came over me.
        </p>
      </div>
    </div>
  </div>;

## Overview

Use alignment utilities to place copy where it belongs without breaking logical reading direction.

| Class          | CSS                   | When to use                                |
| -------------- | --------------------- | ------------------------------------------ |
| `.text-start`  | `text-align: start;`  | Default reading alignment                  |
| `.text-center` | `text-align: center;` | Headlines, testimonials, CTA sections      |
| `.text-end`    | `text-align: end;`    | Metadata, side notes, number-heavy content |

### Start Alignment

<TextStartDemo />

```html theme={null}
<p class="text-start">
  Long-form content stays easiest to scan when it follows the reading edge.
</p>
```

Use `.text-start` for long-form copy and default reading flow.

### Center Alignment

<TextCenterDemo />

```html theme={null}
<p class="text-center">
  Center alignment puts the spotlight on the message.
</p>
```

Combine `.text-center` with a constrained width when you want the message to sit in the middle of the layout.

### End Alignment

<TextEndDemo />

```html theme={null}
<p class="text-end">
  Updated: April 2026
</p>
```

Use `.text-end` for side notes, timestamps, and compact metadata that should sit against the far edge.