Tailwind CSS Font Style
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS font-style property. If we want to give design to any type of text then we can make the use of Tailwind CSS font style class. It helps to make a better user experience.
Font Style classes:
- italic
- non-italic
italic: This class is used to set the font style as italic.
Syntax:
<element class="italic">...</element>
Example:
HTML
<!DOCTYPE html> < head > < link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel = "stylesheet" > </ head > < body class = "text-center mx-4 space-y-2" > < h1 class = "text-green-600 text-5xl font-bold" > w3wiki </ h1 > < b >Tailwind CSS Font Style Class</ b > < div class = "mx-24 bg-green-200" > < p class = "p-4 italic text-justify" > w3wiki: A Computer Science portal for Beginner those who wants to pursue an engineering degree or wants to create a career on engineering field. </ p > </ div > </ body > </ html > |
Output:
italic font style
non-italic: This is basically the default font, which is used to reset italic text at different breakpoints.
Syntax:
<element class="non-italic">...</element>
Example:
HTML
<!DOCTYPE html> < head > < link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel = "stylesheet" > </ head > < body class = "text-center mx-4 space-y-2" > < h1 class = "text-green-600 text-5xl font-bold" > w3wiki </ h1 > < b >Tailwind CSS Font Style Class</ b > < div class = "mx-24 bg-green-200" > < p class = "p-4 non-italic text-justify" > w3wiki: A Computer Science portal for Beginner those who wants to pursue an engineering degree or wants to create a career on engineering field. </ p > </ div > </ body > </ html > |
Output:
Contact Us