# How to Apply text-justify Bootstrap 5 Alignment in Tailwind CSS

> Apply text-justify Bootstrap 5 alignment in Tailwind CSS for perfectly justified text. Learn how to use the text-justify utility class for balanced layouts.

- Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- Tags: how-to-guide
- Published: 2026-02-18

---

**Use the `text-justify` utility class on any HTML element to apply `text-align: justify`, delivering identical behavior to Bootstrap 5's text justification.**

Tailwind CSS provides a direct equivalent to Bootstrap 5's text justification through the atomic `text-justify` utility. This class generates the same CSS output as Bootstrap while integrating seamlessly with Tailwind's responsive prefixes and state variants. Understanding how this utility is implemented in the `tailwindlabs/tailwindcss` source code ensures you can migrate Bootstrap layouts or build justified text components with complete confidence.

## Where text-justify is Defined in the Source Code

The `text-justify` utility is registered as a **static utility** in the core Tailwind CSS package. In [`packages/tailwindcss/src/utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts), the framework explicitly maps the class name to its CSS declaration:

```typescript
staticUtility('text-justify', [['text-align', 'justify']])

```

This invocation at lines 3823–3824 creates the `.text-justify` selector that emits `text-align: justify;` in the final CSS bundle. Unlike Bootstrap's component-based approach, Tailwind generates this as an atomic utility, meaning it applies exactly one CSS property without side effects or inherited styles.

## Basic Implementation Examples

Apply the class directly to any block-level or inline element requiring justified alignment:

```html
<!-- Simple paragraph with justified text -->
<p class="text-justify">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
  imperdiet, sapien nec laoreet volutpat, elit nunc aliquet nisi,
  vitae pulvinar urna sapien at nunc.
</p>

```

Because Tailwind uses a **JIT (Just-In-Time) compiler**, only the utilities you actually use appear in your production CSS, keeping bundles minimal even when the framework supports thousands of possible class combinations.

## Responsive and State-Based Justification

Tailwind extends the basic `text-justify` Bootstrap 5 alignment behavior with responsive prefixes and state variants. You can change alignment based on viewport size or user interaction:

```html
<!-- Responsive justification: left on mobile, justified on desktop -->
<p class="text-left lg:text-justify">
  This text aligns left on small screens and justifies on large screens.
</p>

<!-- Dark mode support -->
<p class="text-justify dark:text-justify">
  Maintains justification across both light and dark color schemes.
</div>

```

The JIT engine processes these variants at build time, generating the necessary media queries and selectors without manual configuration.

## Verification Through Test Coverage

Tailwind's test suite confirms the exact CSS output for this utility. In [`packages/tailwindcss/src/utilities.test.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.test.ts) at lines 21973–21988, a snapshot test validates that invoking `text-justify` produces:

```css
.text-justify {
  text-align: justify;
}

```

This verification ensures that the `text-justify` utility remains stable across Tailwind CSS versions and behaves exactly as expected when migrating from Bootstrap 5.

## Summary

- **Use `class="text-justify"`** to apply `text-align: justify` identical to Bootstrap 5's implementation.
- The utility is defined in [`packages/tailwindcss/src/utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts) using `staticUtility('text-justify', [['text-align', 'justify']])`.
- Tailwind's JIT compiler only includes used utilities, optimizing bundle size compared to framework-heavy alternatives.
- Combine with responsive prefixes (e.g., `lg:text-justify`) or state variants for advanced layout control.
- Test coverage in [`utilities.test.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/utilities.test.ts) guarantees consistent CSS generation across versions.

## Frequently Asked Questions

### Does Tailwind CSS support the same text-justify behavior as Bootstrap 5?

Yes. Tailwind's `text-justify` class produces identical CSS output (`text-align: justify`) to Bootstrap 5's `text-justify` class. The implementation differs in architecture—Tailwind generates atomic utilities via `staticUtility()` in [`utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/utilities.ts) rather than using predefined component classes, but the browser rendering remains the same.

### How do I make text-justify responsive in Tailwind?

Prefix the utility with any breakpoint identifier from your Tailwind config. For example, `lg:text-justify` applies justification only on large screens, while `text-left lg:text-justify` creates a mobile-first approach that switches from left-aligned to justified at the large breakpoint. The JIT compiler handles the media query generation automatically.

### Can I use text-justify with dark mode or hover states?

Yes. Tailwind supports variant stacking, allowing combinations like `dark:text-justify` or `hover:text-justify`. While justification rarely changes on hover, these variants demonstrate the utility's integration with Tailwind's variant system. The class works consistently across all color schemes without additional configuration.

### Where is the text-justify utility defined in the Tailwind source code?

The utility is registered in [`packages/tailwindcss/src/utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts) at lines 3823–3824 using the `staticUtility()` function. This location maps the class name to the CSS property pair `['text-align', 'justify']`, ensuring the generated stylesheet contains the correct declaration when you use the class in your markup.