Tailwind CSS - Text Indent

Previous
Quiz
Next

Tailwind CSS Text Indent is a collection of predefined classes that control how much space text is pushed in from the left side, adjust the first line of text, or remove any space adjustments within HTML elements.

Tailwind CSS Text Indent Classes

Below is a list of Tailwind CSS Text Indent classes with properties that control the indentation of text within HTML elements.

Class CSS Properties
indent-0 text-indent: 0px;
indent-px text-indent: 1px;
indent-0.5 text-indent: 0.125rem; /* 2px */
indent-1 text-indent: 0.25rem; /* 4px */
indent-1.5 text-indent: 0.375rem; /* 6px */
indent-2 text-indent: 0.5rem; /* 8px */
indent-2.5 text-indent: 0.625rem; /* 10px */
indent-3 text-indent: 0.75rem; /* 12px */
indent-3.5 text-indent: 0.875rem; /* 14px */
indent-4 text-indent: 1rem; /* 16px */
indent-5 text-indent: 1.25rem; /* 20px */
indent-6 text-indent: 1.5rem; /* 24px */
indent-7 text-indent: 1.75rem; /* 28px */
indent-8 text-indent: 2rem; /* 32px */
indent-9 text-indent: 2.25rem; /* 36px */
indent-10 text-indent: 2.5rem; /* 40px */
indent-11 text-indent: 2.75rem; /* 44px */
indent-12 text-indent: 3rem; /* 48px */
indent-14 text-indent: 3.5rem; /* 56px */
indent-16 text-indent: 4rem; /* 64px */
indent-20 text-indent: 5rem; /* 80px */
indent-24 text-indent: 6rem; /* 96px */
indent-28 text-indent: 7rem; /* 112px */
indent-32 text-indent: 8rem; /* 128px */
indent-36 text-indent: 9rem; /* 144px */
indent-40 text-indent: 10rem; /* 160px */
indent-44 text-indent: 11rem; /* 176px */
indent-48 text-indent: 12rem; /* 192px */
indent-52 text-indent: 13rem; /* 208px */
indent-56 text-indent: 14rem; /* 224px */
indent-60 text-indent: 15rem; /* 240px */
indent-64 text-indent: 16rem; /* 256px */
indent-72 text-indent: 18rem; /* 288px */
indent-80 text-indent: 20rem; /* 320px */
indent-96 text-indent: 24rem; /* 384px */

Functionality of Tailwind CSS Text Indent Classes

  • indent-0: This class adjusts the left spacing of text to 0 px.
  • indent-px: This class adjusts the left spacing of text to 1 px.
  • indent-*: This represents classes in Tailwind CSS for text indentation, covering various ranges.
  • indent-{0.5-4}: This class adjusts the left spacing of text ranging from 2 px (1.125 rem) to 16 px (1 rem), increasing by 2 px increments, with an indentation increment of 0.5.
  • indent-{4-12}: This class adjusts the left spacing of text ranging from 16 px (1 rem) to 44 px (2.75 rem), increasing by 4 px increments, with an indentation increment of 1.
  • indent-{12-16}: This class adjusts the left spacing of text ranging from 48 px (3rem) to 64 px (4 rem), increasing by 8px increments, with an indentation increment of 2.
  • indent-{16-64}: This class adjusts the left spacing of text ranging from 64 px (4 rem) to 256 px (16 rem), increasing by 16 px increments, with an indentation increment of 4.
  • indent-{64-72}: This class adjusts the left spacing of text from 256 px (16 rem) to 288 px (18 rem), with an indentation increment of 8.
  • indent-{72-80}: This class adjusts the left spacing of text from 288 px (18 rem) to 320 px (20 rem), with an indentation increment of 8.
  • indent-{80-96}: This class adjusts the left spacing of text from 320 px (20 rem) to 384 px (24 rem), with an indentation increment of 16.

Tailwind CSS Text Indent Class Examples

Below are examples of Tailwind CSS Text Indent classes that show how text indentation can be applied to paragraphs and other text elements within HTML.

Adjusting Text Indentation

This example shows how Tailwind CSS allows for adjusting the left spacing of text within an element. Here, we use the Text Indent class to indent the text with a positive value.

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 Indent
    </h1> 
    <p class="underline font-bold">
       Applying an indentation of 12 for left spacing
    </p>
    <p  class="indent-12">
        Tutorialspoint covers a wide array of programming 
        languages, frameworks, and tools. Whether you're 
        interested in Java, Python, C++, JavaScript, or 
        any other language, you'll find comprehensive 
        tutorials with examples and explanations.
    </p>
</body>

</html>

Text Indentation with Negative Values

This example shows how the text indent classes in Tailwind CSS can be used to adjust the left spacing of text within elements by applying negative values. Negative values shifts text to the left , changing its alignment and layout.

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 Indent
    </h1> 
    <p class="underline font-bold">
      Applying Negative indentation of 12
    </p>
    <div class="-indent-12  bg-gray-300 ml-16">
        Tutorialspoint covers a wide array of programming 
        languages, frameworks, and tools. Whether you're 
        interested in Java, Python, C++, JavaScript, or 
        any other language, you'll find comprehensive 
        tutorials with examples and explanations.
    </div>
</body>

</html>

Adjusting Text Indentation on Hover

This example shows the use of Tailwind CSS to dynamically adjust text indentation when hovering over paragraphs. The first paragraph applies a positive indentation of 8 units, while the second paragraph applies a negative indentation of 8 units upon hover.

Hover over each paragraph to see the text indentation change accordingly.

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 Indent
    </h1> 
    <div class="p-2 ml-4">
        <p class="underline font-bold">
            Applying Positive indentation of 8 on hover
        </p>

        <p class="hover:indent-8 bg-gray-300">
            Tutorialspoint covers a wide array of programming 
            languages, frameworks, and tools. Whether you're 
            interested in Java, Python, C++, JavaScript, or 
            any other language, you'll find comprehensive 
            tutorials with examples and explanations.
        </p >

        <p class="underline font-bold mt-8">
            Applying Negative indentation of 8 on hover
        </p>

        <p class="hover:-indent-8 bg-gray-300 ">
            Tutorialspoint covers a wide array of programming 
            languages, frameworks, and tools. Whether you're 
            interested in Java, Python, C++, JavaScript, or 
            any other language, you'll find comprehensive 
            tutorials with examples and explanations.
        </p> 
    </div>
</body>

</html>
Print Page
Previous
Next