Tailwind CSS Typography Complete Reference
Last Updated :
04 Aug, 2023
Tailwind is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Typography, In which all style, properties, and spacing are covered in this class. For ex. Font family has multiple fonts as backups, font size has set the font size of the text.
Below example will give you a brief idea about the Typography of Tailwind CSS:
Example:
HTML
<!DOCTYPE html>
< head >
< link href =
rel = "stylesheet" >
</ head >
< body class = "text-center mx-4 space-y-2" >
< h1 class = "text-green-600 text-5xl font-bold" >
GeeksforGeeks
</ h1 >
< b >Tailwind CSS Font Variant Numeric Class</ b >
< div class = "bg-green-300 mx-24 h-full" >
< p class = "lining-nums" >lining-nums: 1234567890</ p >
< p class = "oldstyle-nums" >oldstyle-nums: 1234567890</ p >
< p class = "proportional-nums" >proportional-nums: 12121</ p >
< p class = "proportional-nums" >proportional-nums: 90909</ p >
< p class = "tabular-nums" >tabular-nums: 12121</ p >
< p class = "tabular-nums" >tabular-nums: 90909</ p >
< p class = "diagonal-fractions" >
diagonal-fractions: 1/2 3/4 5/6
</ p >
</ div >
</ body >
</ html >
|
Output:
Tailwind CSS Typography
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...