Skip to content
Related Articles

Related Articles

Tailwind CSS Font Style

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
View Discussion
Improve Article
Save Article

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">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Font Style Class</b
    <div class="mx-24 bg-green-200">
        <p class="p-4 italic text-justify">
            Geeksforgeeks: A Computer Science portal 
            for Geeks those who wants to persue 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">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Font Style Class</b
    <div class="mx-24 bg-green-200">
        <p class="p-4 non-italic text-justify">
            Geeksforgeeks: A Computer Science portal 
            for Geeks those who wants to persue an engineering 
            degree or wants to create a career on engineering field.
        </p>
  
  
    </div>
</body
  
</html>                    

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!