Tutorials


Text Alignment, Color, and Size Utilities in Tailwind CSS


Text Alignment, Color, and Size Utilities in Tailwind CSS

Tailwind CSS provides a set of utilities for controlling text alignment, color, and size, which are essential for styling typography effectively. These utilities make it easy to adjust the appearance of text elements directly within your HTML using predefined classes.

1. Text Alignment

Text alignment utilities in Tailwind CSS help you control the horizontal alignment of text within an element.

Utility Classes

  • text-left: Aligns text to the left.
  • text-center: Aligns text to the center.
  • text-right: Aligns text to the right.
  • text-justify: Justifies text (stretches text to align with both left and right margins).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Alignment Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="text-left bg-blue-500 text-white p-4">
    Left-aligned text
  </div>
  <div class="text-center bg-red-500 text-white p-4 mt-4">
    Center-aligned text
  </div>
  <div class="text-right bg-green-500 text-white p-4 mt-4">
    Right-aligned text
  </div>
  <div class="text-justify bg-yellow-500 text-white p-4 mt-4">
    Justified text. This text will stretch to align with both the left and right margins, creating a more formal appearance.
  </div>
</body>
</html>

In this example:

  • The text-left class aligns text to the left.
  • The text-center class centers the text.
  • The text-right class aligns text to the right.
  • The text-justify class justifies the text.

2. Text Color

Text color utilities allow you to set the color of the text. Tailwind provides a wide range of colors by default, and you can also customize colors in your configuration.

Utility Classes

  • text-{color}: Sets the color of the text.

Common Values:

  • text-gray-500: Sets the text color to a medium gray.
  • text-red-600: Sets the text color to a deep red.
  • text-blue-400: Sets the text color to a light blue.
  • text-green-700: Sets the text color to a dark green.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Color Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="text-gray-500">Gray text color</p>
  <p class="text-red-600 mt-4">Red text color</p>
  <p class="text-blue-400 mt-4">Blue text color</p>
  <p class="text-green-700 mt-4">Green text color</p>
</body>
</html>

In this example:

  • The text-gray-500 class applies a medium gray color to the text.
  • The text-red-600 class applies a deep red color.
  • The text-blue-400 class applies a light blue color.
  • The text-green-700 class applies a dark green color.

3. Text Size

Text size utilities allow you to adjust the font size of text elements. Tailwind provides a range of text sizes from small to large.

Utility Classes

  • text-{size}: Sets the font size of the text.

Common Values:

  • text-xs: Extra small text (0.75rem / 12px).
  • text-sm: Small text (0.875rem / 14px).
  • text-base: Base text size (1rem / 16px).
  • text-lg: Large text (1.125rem / 18px).
  • text-xl: Extra large text (1.25rem / 20px).
  • text-2xl: 2x extra large text (1.5rem / 24px).
  • text-3xl: 3x extra large text (1.875rem / 30px).
  • text-4xl: 4x extra large text (2.25rem / 36px).
  • text-5xl: 5x extra large text (3rem / 48px).
  • text-6xl: 6x extra large text (3.75rem / 60px).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Size Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="text-xs">Extra small text</p>
  <p class="text-sm mt-4">Small text</p>
  <p class="text-base mt-4">Base text size</p>
  <p class="text-lg mt-4">Large text</p>
  <p class="text-xl mt-4">Extra large text</p>
  <p class="text-2xl mt-4">2x extra large text</p>
  <p class="text-3xl mt-4">3x extra large text</p>
  <p class="text-4xl mt-4">4x extra large text</p>
</body>
</html>

In this example:

  • The text-xs class sets the font size to extra small.
  • The text-sm class sets the font size to small.
  • The text-base class sets the font size to base (normal size).
  • The text-lg class sets the font size to large.
  • The text-xl class sets the font size to extra large.
  • Larger sizes like text-2xl, text-3xl, and text-4xl increase the font size progressively.

Summary

  • Text Alignment: Use classes like text-left, text-center, text-right, and text-justify to control the horizontal alignment of text.
  • Text Color: Use classes like text-gray-500, text-red-600, and text-blue-400 to set the color of the text.
  • Text Size: Use classes like text-xs, text-sm, text-base, text-lg, and text-xl to adjust the size of the text.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about