Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Font Style

Quiz

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>

Print Page