Tailwind CSS provides utility classes to control the capitalization of text. These classes are alternatives to the CSS text-transform property. They allow you to display text in uppercase, lowercase, capitalized, or its original case.
Text Transform Classes
1. uppercase
The uppercase class converts all letters in the text to uppercase.
Syntax:
<element class="uppercase">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Text Transform</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6 text-center">
<h1 class="text-2xl font-bold text-green-600">
Tailwind CSS Text Transform
</h1>
<p class="mt-4 rounded bg-green-100 p-4 uppercase">
A Computer Science Portal for Geeks
</p>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
2. lowercase
The lowercase class converts all letters in the text to lowercase.
Syntax:
<element class="lowercase">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Text Transform</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6 text-center">
<h1 class="text-2xl font-bold text-green-600">
Tailwind CSS Text Transform
</h1>
<p class="mt-4 rounded bg-green-100 p-4 lowercase">
A Computer Science Portal for Geeks
</p>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
3. capitalize
The capitalize class converts the first letter of each word to uppercase while preserving the case of the remaining letters.
Syntax:
<element class="capitalize">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Text Transform</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6 text-center">
<h1 class="text-2xl font-bold text-green-600">
Tailwind CSS Text Transform
</h1>
<p class="mt-4 rounded bg-green-100 p-4 capitalize">
a computer science portal for geeks
</p>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
4. normal-case
The normal-case class prevents text transformation and preserves the original capitalization of the text.
Syntax:
<element class="normal-case">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Text Transform</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6 text-center">
<h1 class="text-2xl font-bold text-green-600">
Tailwind CSS Text Transform
</h1>
<p class="mt-4 rounded bg-green-100 p-4 normal-case">
a Computer Science Portal for Geeks
</p>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->