Ident the first line of a paragraph

Indenting the first letter of a paragraph is a typographic technique called a "drop cap," which has been used in print design for centuries. This technique is often used for stylistic purposes or to highlight a particular piece of text.

In this tip, I show you how easy it is to implement with Tailwind CSS!


00:00 Let's add a typographic touch to this article by using some text indentation on the paragraph here. So here on the first paragraph, I'll add a class of indent dash. And let's use level 12 here. And you can see the first line of our paragraph has been indented now. And say we wanted the same indentation to all the paragraphs.

00:17 I could delete the class from this paragraph and add the indent 12 class to the parent element. And now the first line of every paragraph in our article has been indented.

The indent-* utilities are pretty useful to indent the first line of a paragraph.

That will give your articles a book-like feel.

More Tips