Displaying a different style for the first line is make the content look different. TailwindCSS provides a first-line class with different modifiers to style the first line of a paragraph.
Styling First Line in TailwindCSS
You can utilize first-line class modifier with all the other style utilities. This will change the style of the first line only and the rest of the content will not be affected. Here is a simple example for styling the first line in TailwindCSS.
|
1 2 3 4 5 6 7 8 9 |
<div class="flex h-screen justify-center items-center flex-col px-20 text-lg"> <p class="first-line:uppercase first-line:font-bold first-letter:leading-10 first-line:text-3xl"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, unde nostrum eum alias quod animi sit at possimus vitae modi officiis cum soluta magni, dignissimos iure laudantium reiciendis nesciunt temporibus? </p> </div> |
The output of the above example will look like the screenshot below.
Conclusion
You can style the first line of your content by utilizing first-line class modifiers with all the other style utilities available in TailwindCSS. You can also style the first letter of the paragraph with TailwindCSS to make things more interesting for readers.