Tutorials


Text Transformations and Decoration in Tailwind CSS


Text Transformations and Decoration in Tailwind CSS

Tailwind CSS provides utilities to handle text transformations and text decoration, which are crucial for styling and enhancing the readability of text elements. These utilities allow you to control text capitalization, text decoration (like underlines), and more.

1. Text Transformations

Text transformations in Tailwind CSS control how text is displayed in terms of capitalization and transformation.

Utility Classes

  • uppercase: Transforms all text to uppercase.
  • lowercase: Transforms all text to lowercase.
  • capitalize: Capitalizes the first letter of each word.
  • normal-case: Resets the text transformation to normal (default).

Examples:

Uppercase

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uppercase Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="uppercase bg-blue-500 text-white p-4">
    This text will be uppercase.
  </p>
</body>
</html>

Lowercase

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lowercase Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="lowercase bg-red-500 text-white p-4">
    THIS TEXT WILL BE LOWERCASE.
  </p>
</body>
</html>

Capitalize

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capitalize Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="capitalize bg-green-500 text-white p-4">
    this text will be capitalized.
  </p>
</body>
</html>

Normal Case

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Normal Case Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="normal-case bg-yellow-500 text-white p-4">
    This text will be normal case.
  </p>
</body>
</html>

In these examples:

  • uppercase converts all text to uppercase.
  • lowercase converts all text to lowercase.
  • capitalize capitalizes the first letter of each word.
  • normal-case returns the text to its default casing.

2. Text Decoration

Text decoration utilities in Tailwind CSS control the appearance of text decoration such as underlines, overlines, and line-throughs.

Utility Classes

  • underline: Adds an underline to the text.
  • line-through: Adds a line through the text (strikethrough).
  • no-underline: Removes any underlines from the text.
  • overline: Adds an overline above the text.

Examples:

Underline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Underline Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="underline bg-blue-500 text-white p-4">
    This text has an underline.
  </p>
</body>
</html>

Line-Through

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line-Through Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="line-through bg-red-500 text-white p-4">
    This text has a line through it.
  </p>
</body>
</html>

No Underline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>No Underline Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="no-underline bg-green-500 text-white p-4">
    This text has no underline.
  </p>
</body>
</html>

Overline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overline Text Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="overline bg-yellow-500 text-white p-4">
    This text has an overline.
  </p>
</body>
</html>

In these examples:

  • underline adds an underline to the text.
  • line-through adds a line through the text.
  • no-underline removes any underlines.
  • overline adds an overline above the text.

Summary

  • Text Transformations:

    • uppercase: Converts text to uppercase.
    • lowercase: Converts text to lowercase.
    • capitalize: Capitalizes the first letter of each word.
    • normal-case: Resets text to normal case.

  • Text Decoration:

    • underline: Adds an underline.
    • line-through: Adds a strikethrough.
    • no-underline: Removes underlines.
    • overline: Adds an overline.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about