Tailwind CSS: Styling the First Letter of Content

Last updated on May 10, 2022 Pennywise Loading... Post a comment

In Tailwind CSS, you can apply special styles for the first letter of content by combining the first-letter modifier with other text utility classes, like this:

<div class="first-letter:text-4xl first-letter:text-blue-500">
   Some content
</div>

A complete example

This example makes the first letter of the first paragraph much bigger than other letters.

Screenshot:

The code:

<body>
    <div class="p-20 first-letter:float-left 
    first-letter:mr-4
    first-letter:text-7xl 
    first-letter:text-blue-900 first-letter:font-bold">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, ligula vel tempor blandit, quam
            risus condimentum arcu, at laoreet ex leo quis turpis. Fusce vestibulum eget est et aliquet. Maecenas semper
            sapien eu pharetra aliquam. Nunc scelerisque neque non dui fringilla blandit.</p>

        <p class="mt-5">Sed a sem augue. Duis
            elementum diam non arcu pulvinar, nec consequat tellus porta. Praesent eu nunc vulputate, auctor enim nec,
            facilisis ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam eros, dictum et urna nec,
            laoreet ultrices arcu. Suspendisse potenti.</p>
    </div>
</body>

That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like