How to Achieve Bootstrap Text Align Right Using Tailwind CSS

Use Tailwind CSS's text-right utility class to align text to the right within any element, providing identical functionality to Bootstrap 3's text-right class.

The Bootstrap text align right pattern is a fundamental layout technique used to position content against the right edge of its container. While Bootstrap 3 implements this through the text-right class, Tailwind CSS achieves the same result through its utility-first architecture. In the tailwindlabs/tailwindcss repository, this functionality is implemented as a static utility in the core utilities module, generating the CSS text-align: right declaration without requiring custom configuration.

Understanding the Bootstrap Text Align Right Equivalent in Tailwind

The text-right Utility Definition

In packages/tailwindcss/src/utilities.ts, the text-right utility is registered using the staticUtility helper at line 3821:

staticUtility('text-right', [['text-align', 'right']])

This single line of source code instructs the Tailwind compiler to generate a CSS rule that applies text-align: right to any element bearing the text-right class. The utility mirrors the Bootstrap text align right behavior exactly, but integrates with Tailwind's variant system for responsive and state-based modifications.

Static Utility Architecture

The staticUtility function, implemented at lines 366-376 in packages/tailwindcss/src/utilities.ts, provides the infrastructure for simple, non-configurable utilities:

function staticUtility(className: string, declarations: ([string, string] | (() => AstNode))[]) {
  utilities.static(className, () => {
    return declarations.map(node => typeof node === 'function' ? node() : decl(node[0], node[1]))
  })
}

This architecture ensures that Bootstrap text align right functionality is available immediately without theme configuration. The function stores a callback that emits a CSS declaration node when the compiler processes your templates.

Implementing Bootstrap Text Align Right in Your Projects

Basic Right Alignment

To achieve the Bootstrap text align right effect in Tailwind, apply the text-right class to any block-level element:

<div class="text-right">
  This content aligns to the right edge of the container.
</div>

This generates the following CSS output:

.text-right {
  text-align: right;
}

Responsive Text Alignment

Unlike Bootstrap 3, Tailwind provides responsive variants by default. Use breakpoint prefixes to apply Bootstrap text align right behavior only at specific screen sizes:

<!-- Right-aligned on medium screens and up -->
<div class="md:text-right">
  Default left alignment on mobile, right alignment on tablets and desktops.
</div>

The compiler generates responsive CSS using the media query defined in your theme:

@media (min-width: 768px) {
  .md\:text-right {
    text-align: right;
  }
}

Interactive State Variants

Tailwind extends Bootstrap text align right functionality with state variants. Apply alignment changes on hover, focus, or other interactive states:

<div class="hover:text-right">
  Text aligns right when the user hovers over this element.
</div>

This generates the CSS:

.hover\:text-right:hover {
  text-align: right;
}

Technical Deep Dive: From Class to CSS

The staticUtility Helper Function

The staticUtility helper in packages/tailwindcss/src/utilities.ts (lines 366-376) creates a mapping between the class name and CSS declarations. When processing your HTML, the Tailwind compiler encounters the text-right class and invokes the registered callback, which returns an abstract syntax tree (AST) node representing the declaration text-align: right.

Compiler Integration

The text-right utility integrates into Tailwind's compilation pipeline through packages/tailwindcss/src/index.ts. During the createUtilities(theme) call, the static utility registration is processed and added to the CSS generation queue. This occurs within the createUtilities factory exported from packages/tailwindcss/src/create-utilities.ts, which maintains the central registry storing both static and functional utilities.

Summary

• The text-right class in Tailwind CSS provides identical functionality to Bootstrap 3's text-right class for aligning text to the right
• Defined in packages/tailwindcss/src/utilities.ts at line 3821 using the staticUtility helper function
• Generates the CSS declaration text-align: right without requiring custom theme configuration
• Supports responsive prefixes (e.g., md:text-right) and state variants (e.g., hover:text-right) automatically
• Implemented via the staticUtility architecture at lines 366-376 in the utilities module

Frequently Asked Questions

What is the Tailwind equivalent of Bootstrap text align right?

The Tailwind CSS equivalent of Bootstrap's text-right class is text-right. Both classes apply text-align: right to the element. In the Tailwind source code at packages/tailwindcss/src/utilities.ts line 3821, this utility is registered as staticUtility('text-right', [['text-align', 'right']]), generating the CSS rule .text-right { text-align: right; }.

How do I make text align right only on mobile devices in Tailwind?

To apply Bootstrap text align right behavior only on mobile devices in Tailwind, use the responsive prefix for your mobile breakpoint. For example, text-right md:text-left aligns text to the right on mobile but resets to left on medium screens and up. Alternatively, use max-md:text-right to target only viewports below the medium breakpoint if your configuration includes max-width variants.

Can I use hover states with the text-right utility in Tailwind?

Yes, Tailwind extends the basic Bootstrap text align right functionality with interactive state variants. Prefix the utility with hover: to apply right alignment only when the user hovers over the element: hover:text-right. This works because the staticUtility registration in utilities.ts automatically supports Tailwind's variant system, generating .hover\:text-right:hover { text-align: right; } in the final CSS output.

Where is the text-right utility defined in the Tailwind CSS source code?

The text-right utility is defined in packages/tailwindcss/src/utilities.ts at line 3821. It uses the staticUtility helper function, which is implemented at lines 366-376 in the same file. The registration staticUtility('text-right', [['text-align', 'right']]) creates a static mapping between the class name and the CSS declaration, which is then processed by the compiler in packages/tailwindcss/src/index.ts during the createUtilities(theme) phase.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}