Tailwind CSS - Text Transform

Previous
Quiz
Next

Tailwind CSS Text Transform is a collection of predefined classes that simplifies the process of changing text capitalization or case within HTML elements.

Tailwind CSS Text Transform Classes

Below is a list of Tailwind CSS Text Transform classes with properties that modify text appearance by transforming its style.

Class CSS Properties
uppercase text-transform: uppercase;
lowercase text-transform: lowercase;
capitalize text-transform: capitalize;
normal-case text-transform: none;

Functionality Of Tailwind CSS Text Transform Classes

  • uppercase: This class converts text into all uppercase letters.
  • lowercase: This class converts text into all lowercase letters.
  • capitalize: This class capitalizes the first letter of each word in the text.
  • normal-case: This class makes text appear in its default style, with lowercase letters and correctly capitalized first letters.

Setting Text Transform

Below are examples of Tailwind CSS Text Transform classes that show how we can make use of these transformations in various contexts.

Applying Text Transform with Tailwind CSS

This example shows how Tailwind CSS Text Transform classes can be used to apply different text transformation styles to HTML elements.

Example

 
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl font-bold mb-6">
        Tailwind CSS  Text Transform
    </h1> 
    <p class="underline">uppercase</p>
    <p class="uppercase text-lg mb-4">
        This text is transformed to uppercase.
    </p>
    <p class="underline">lowercase</p>
    <p class="lowercase text-lg mb-4">
        THIS TEXT IS TRANSFORMED TO LOWERCASE.
    </p>
    <p class="underline">capitalized</p>
    <p class="capitalize text-lg mb-4">
        this text will be capitalized.
    </p>
    <p class="underline">normal text</p>
    <p class="normal-case text-lg mb-4">
        tHis TExT will reVert tO its dEfault capItalIzatIon.
    </p>
</body>

</html>

Conditional Text Transform on Hover

This example shows the use of Tailwind CSS Text Transform utility classes to apply text transformation styles conditionally based on hover states. For example, 'hover:uppercase' transforms text to uppercase when hovered over.

Example

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
         Tailwind CSS  Text Transform
    </h2>
    <h2 class="font-bold text-lg">
        Hover Over The Text to See Transformations.
    </h2>
    <p class="lowercase text-lg hover:uppercase mb-4">
        Hover to see it transform to uppercase.
    </p>
    <p class="uppercase text-lg hover:lowercase mb-4">
        Hover to see it transform to lowercase.
    </p>
    <p class="lowercase text-lg hover:capitalize mb-4">
       hover to see it transform to Capitalize.
    </p>
     <p class="normal-case text-lg hover:uppercase mb-4">
        Text remains in normal case, 
        but transforms to uppercase on hover.
    </p>
</body>

</html>
Print Page
Previous
Next