Tailwind CSS Text Transform

The text-transform utility classes of Tailwind CSS are used to apply transformations to the text. It provides various classes that allow us to transform the text to uppercase, lowercase, capitalize, and normal-case.

Syntax

The text-transform utility classes can be used using the following syntax:

<div class="text-{transform}">
  <!-- Content goes here -->
</div>

Where {transform} specifies the type of transformation we want to apply to the text.

Example

Let's see some examples of text-transform classes:

<div class="text-uppercase">
  hello world
</div>
<div class="text-lowercase">
  HELLO WORLD
</div>
<div class="text-capitalize">
  hello world
</div>
<div class="text-normal-case">
  HeLLo WoRLD
</div>

Output

The above code will produce the following output:

HELLO WORLD
hello world
Hello World
HeLLo WoRLD

Explanation

• text-uppercase: This class is used to transform all the letters of the text to uppercase.

• text-lowercase: This class is used to transform all the letters of the text to lowercase.

• text-capitalize: This class is used to capitalize the first letter of each word in the text.

• text-normal-case: This class is used to reset the text to the normal case. This is the default behavior of the text.

Use

The text-transform utility classes are useful when we want to transform the case of the text for some specific requirements of our project.

Important Points

• The text-normal-case class is used to reset the text to the normal case.

• We can also use the uppercase, lowercase, capitalize, and normal-case values directly in the text-transform CSS property.

Summary

• The text-transform utility classes are used to apply transformations to the text.

• We can transform the text to uppercase, lowercase, capitalize, and normal-case using the text-uppercase, text-lowercase, text-capitalize, and text-normal-case classes respectively.

• The text-normal-case class is used to reset the text to the normal case.