How to Add a Text Indent in Tailwind CSS
Text indentation is an empty space between the text block and the margin in a paragraph. Text indentation helps improve readability by creating an empty whitespace prior to the text to mark the start of the paragraph. A text-indent can be added using the “text-indent” property in Tailwind CSS. A Tailwind CSS is a rapidly growing CSS framework that is utilized to develop responsive websites. It is only a framework that does not come with predefined classes for CSS elements, such as tables or buttons.
This post will elaborate on the procedure to add a text-indent using Tailwind CSS.
How to Add a Text Indent in Tailwind CSS?
The text indentation can be added using the “indent-{value}” utility class. Using this user can:
Example 1: Add a Text Indent in Tailwind CSS
The text-indent can be added in the Tailwind CSS by utilizing the “indent-{value}” utility class. Let’s look at the practical example to understand more precisely:
Step 1: Include Tailwind in HTML
First add the “Tailwind” CSS in the head section, as demonstrated below:
Step 2: Add a Text Indent
To add the text indent using Tailwind CSS, first, add the “class” utility then assign it the “indent-{value}”. The “value” here represents the number of spaces, such as the value “12” represents 12 spaces:
Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform.
</p>
Output
The output below confirms that the text-indent has been added successfully:
Example 2: Add the Negative Text Indent Using Tailwind CSS
The negative text-indent means that the text will disappear from the left side. To add the negative text-indent simply add the subtract sign “–” at the start of the “indent-{value}” utility:
Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform. Linux Hint is a leading e-learning platform.
</p>
Output
The output confirms that the negative text-indent has been added:
Conclusion
To add a text-indent in Tailwind CSS, first, add the “indent-{value}” as a class utility. The “value” represents the amount of indentation or number of spaces. For instance, to add the 10 spaces indentation simply mention inside the “indent-{value}” class utility. This post has presented two practical examples to better explain the addition of text indentation in Tailwind CSS.
Source: linuxhint.com