Tailwind CSS provides utility classes to control the font style of text. These classes are alternatives to the CSS font-style property and allow you to make text italic or reset it to a normal font style.
Font Style Classes:
1. italic
The italic class applies an italic font style to an element.
Syntax:
<element class="italic">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Italic</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6 text-center">
<h1 class="text-3xl font-bold text-green-600">
GeeksforGeeks
</h1>
<h2 class="mt-4 text-xl font-semibold">
Tailwind CSS Font Style
</h2>
<p class="mt-4 italic">
This text is displayed in italic style.
</p>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Output: The paragraph text appears in italic style.
2. not-italic
The not-italic class sets the font style to normal. It can be used to reset italic styling applied by another class or inherited from a parent element.
Syntax:
<element class="not-italic">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Not Italic</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6 text-center">
<h1 class="text-3xl font-bold text-green-600">
GeeksforGeeks
</h1>
<h2 class="mt-4 text-xl font-semibold">
Tailwind CSS Font Style
</h2>
<p class="mt-4 italic">
This parent text is italic.
<span class="not-italic">
This text uses a normal font style.
</span>
</p>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Output: The parent paragraph is italic, while the nested span uses a normal font style.