Skip to content
Related Articles

Related Articles

Tailwind CSS Text Transform
  • Last Updated : 22 Feb, 2021

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-transform property. This class is used to control the capitalization of the text.

Text Transform classes:

  • uppercase 
  • lowercase 
  • capitalize 
  • normal-case 

uppercase: It is used to convert or transform all characters in each word into uppercase.

Syntax:

<element class="uppercase">...</element>

Example:



HTML




<!DOCTYPE html> 
<html>
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Text Transform Class</b
    <div class="mx-14 bg-green-200 p-4">
    <p class="uppercase"
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body
  
</html

Output:

lowercase: It is used to convert or transform all characters in each word to lowercase.

Syntax:

<element class="lowercase">...</element>

Example:

HTML




<!DOCTYPE html> 
<html>
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Text Transform Class</b
    <div class="mx-14 bg-green-200 p-4">
    <p class="lowercase"
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body
  
</html

Output:

capitalize:  It is used to transform the first character of each word to uppercase.



Syntax:

<element class="capitalize">...</element>

Example:

HTML




<!DOCTYPE html> 
<html>
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Text Transform Class</b
    <div class="mx-14 bg-green-200 p-4">
    <p class="capitalize"
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body
  
</html

Output:

capitalize

normal-case: It has a default value. It has no capitalization.

Syntax:

<element class="normal-case">...</element>

Example:

HTML




<!DOCTYPE html> 
<html>
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Text Transform Class</b
    <div class="mx-14 bg-green-200 p-4">
    <p class="normal-case"
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body
  
</html

Output:

normal case

My Personal Notes arrow_drop_up
Recommended Articles
Page :