Starting the first paragraph with a capital letter or different color has been in trend for so long. TailwindCSS provides a default class that you can use to style the first letter. Almost all the styles available in TailwindCSS, are valid for styling the first letter.
Styling First Letter in TailwindCSS
You can utilize the first-letter class in TailwindCSS to apply any style you want. In the following example, the first letter has a blue color and a different font size.
|
1 2 3 4 5 6 7 8 |
<div class="flex h-screen justify-center items-center flex-col px-20 text-lg"> <p class="first-letter:text-5xl first-letter:text-blue-600 first-letter:pr-1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur magni impedit, nemo aliquid repellat vitae necessitatibus atque animi tenetur consectetur laborum quo vel cum ratione omnis. Accusantium ducimus optio qui.</p> </div> |
You can check the working example which will look like the following output.
Here is another example to style the first letter in TailwindCSS. In this example, the first letter is having some margin from the right and has float the position to the left. The code for the example is written below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="flex h-screen justify-center items-center flex-col px-20 text-lg"> <p class="first-letter:text-7xl first-letter:font-bold first-letter:text-black first-letter:mr-3 first-letter:float-left "> Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot. </p> </div> |
The output of the above example is
:
Conclusion
The class first-letter is very useful to style the first letter of any paragraph or heading. All the other styles padding, fontt-size, margin can be used with first-letter class. You can also see how to style the first line with TailwindCSS to make it different than others.