Tailwind CSS - Font Style


Tailwind CSS Font Style makes it easy to style text on your webpage by using predefined classes, ensuring it appears attractive throughout your site.

Tailwind CSS Font Style Classes

Below is a list of Tailwind CSS classes that specify different font styles.

Class CSS Properties
italic font-style: italic;
non-italic font-style: normal;

Functionality Of Tailwind CSS Font Style Classes

  • italic: This class applies the italic style to text, giving it a slanted appearance.
  • non-italic: This class removes the italic style from text, ensuring it appears upright.

Tailwind CSS Font Style Class Examples

Below are examples of Tailwind CSS font style classes, which allow you to easily apply different text formatting options to control the appearance of text on your webpage.

Tailwind CSS for Italic and Non-Italic Font Style

This example shows how Tailwind CSS can be used to style paragraphs with italic and non-italic font styles using predefined classes.

<!DOCTYPE html>
<html lang="en">
<head>    
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Style
    </h1>
    <p class="underline">Using Italic</p> 
    
    <p class="italic">
        This text is styled as italic.
    </p>

    <br>
    <p class="underline">Not using italic style</p>
    <p class="not-italic">
        This text is styled as not italic.
    </p>
</body>

</html>