0
0
Tailwindmarkup~5 mins

Text transform (uppercase, lowercase) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Text transform changes how letters look in words. It helps make text all uppercase or lowercase easily.

When you want all letters in a heading to be uppercase for style.
When you want a button label to always show in lowercase.
When you want to make text consistent without rewriting it.
When you want to highlight text by changing its case.
When you want to improve readability or follow design rules.
Syntax
Tailwind
class="uppercase"
class="lowercase"
class="capitalize"

uppercase makes all letters capital.

lowercase makes all letters small.

capitalize makes first letter of each word uppercase.

Examples
This makes the text show as HELLO WORLD.
Tailwind
<p class="uppercase">hello world</p>
This makes the text show as hello world.
Tailwind
<p class="lowercase">HELLO WORLD</p>
This makes the text show as Hello World.
Tailwind
<p class="capitalize">hello world</p>
Sample Program

This page shows three lines of text. The first line is all uppercase, the second is all lowercase, and the third has each word starting with a capital letter. Tailwind classes do the text transform automatically.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Text Transform Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section>
    <h2 class="uppercase text-lg font-bold mb-2">this is uppercase text</h2>
    <p class="lowercase mb-2">THIS IS LOWERCASE TEXT</p>
    <p class="capitalize">this is capitalized text</p>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Text transform only changes how text looks, not the actual text content.

Use semantic HTML tags like <h2> and <p> for better accessibility.

Tailwind classes make it easy to apply text transform without writing custom CSS.

Summary

Use uppercase to make text all capital letters.

Use lowercase to make text all small letters.

Use capitalize to make the first letter of each word uppercase.