Tailwind CSS Typograph
In Tailwind CSS, typography encompasses the styles and utility classes associated with text and font management. Tailwind CSS offers an extensive collection of utility classes that enable you to effortlessly apply typography styles to your elements without the need to create custom CSS.
These utility classes cover a wide range of text-related properties, making it convenient to control fonts, text sizes, line heights, letter spacing, and more, all while adhering to a consistent and responsive design system. This approach streamlines the development process and promotes a more efficient and maintainable codebase for your web projects.
Headings
text-{size} utility classes can be used to set the font size of
the text
element in tailwind css.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1 class="text-5xl font-extrabold leading-tight">Heading 1</h1>
<h2 class="text-4xl font-bold leading-tight">Heading 2</h2>
<h3 class="text-3xl font-bold leading-tight">Heading 3</h3>
<h4 class="text-2xl font-bold leading-tight">Heading 4</h4>
<h5 class="text-xl font-bold leading-tight">Heading 5</h5>
<h6 class="text-lg font-bold leading-tight">Heading 6</h6>Customize Headings
Colors, style and font size can be used to customize headings as per the design requirements with much of the ease.
This is heading
This is heading
This is text gradient
This is text underline
<h2 class="text-gray-900 text-4xl font-extrabold md:text-5xl lg:text-6xl">
This is <span class="text-indigo-600">heading</span>
</h2>
<h2 class="text-gray-900 text-4xl font-extrabold md:text-5xl lg:text-6xl">
This is <span class="px-2 text-white bg-indigo-600 rounded">heading</span>
</h2>
<h2 class="text-gray-900 text-4xl font-extrabold md:text-5xl lg:text-6xl">
This is text <span class="text-transparent bg-clip-text bg-gradient-to-r to-indigo-600 from-violet-400">gradient</span>
</h2>
<h2 class="text-gray-900 text-4xl font-extrabold md:text-5xl lg:text-6xl">
This is text <span class="underline underline-offset-3 decoration-8 decoration-indigo-600 ">underline</span>
</h2>Paragraphs
The paragraph element following the example can be used anywhere inside article content or landing page.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-500 mb-3">Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>
<p class="text-gray-500">Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>Leading paragraph
First paragraph of the article can be used with different text also known as leading text, check the following example to know more about the leading paragraph.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-500 mb-3 text-lg">Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>First Letter
First letter of the article can be highlighted using the following example.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-500 mb-3 first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left">Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>
Paragraph link & Underline
In tailwind css links inside the paragraph with different color can be set as shown in the following example.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-500">Well, let me tell you something, funny boy. Y'know that little stamp, the one that says <a href="#" class="text-indigo-600 underline font-medium">"New York Public Library"?</a> Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>Font size
text-{size} class helps you change the font size of the text
elements.
Pd
Pd
Pd
Pd
Pd
Pd
Pd
Pd
Pd
Pd
Pd
Pd
Pd
<p class="text-xs text-gray-500">This is text</p>
<p class="text-sm text-gray-500">This is text</p>
<p class="text-base text-gray-500">This is text</p>
<p class="text-lg text-gray-500">This is text</p>
<p class="text-xl text-gray-500">This is text</p>
<p class="text-2xl text-gray-500">This is text</p>
<p class="text-3xl text-gray-500">This is text</p>
<p class="text-4xl text-gray-500">This is text</p>
<p class="text-5xl text-gray-500">This is text</p>
<p class="text-6xl text-gray-500">This is text</p>
<p class="text-7xl text-gray-500">This is text</p>
<p class="text-8xl text-gray-500">This is text</p>
<p class="text-9xl text-gray-500">This is text</p>Font weight and italics
By using the following example one can easily change the weight of the text and also make text italic.
Bold weight text.
Semibold weight text.
Normal weight text.
Light weight text.
Italic text.
<p class="mb-4 font-bold text-gray-500">Bold weight text.</p>
<p class="mb-4 font-semibold text-gray-500">Semibold weight text.</p>
<p class="mb-4 font-normal text-gray-500">Normal weight text.</p>
<p class="mb-4 font-light text-gray-500">Light weight text.</p>
<p class="italic text-gray-500">Italic text.</p>Text alignment
By using the text align property you can change the alignment of the text as per your requirement. Here, one can keep the text left or right aligned and also keep it centrally aligned or keep it justified.
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
<p class="text-start text-gray-500">Start aligned text on all viewport sizes.</p>
<p class="text-center text-gray-500">Center aligned text on all viewport sizes.</p>
<p class="text-right text-gray-500">End aligned text on all viewport sizes.</p>Text color
Following the utility class will help you to change the color of the text.
This text is in indigo color.
This text is in red color.
This text is in green color.
This text is in yellow color.
This text is in blue color.
<p class="text-indigo-600">This text is in indigo color.</p>
<p class="text-red-600">This text is in red color.</p>
<p class="text-green-600">This text is in green color.</p>
<p class="text-yellow-600">This text is in yellow color.</p>
<p class="text-blue-600">This text is in blue color.</p>Letter spacing
tracking-{type} class will help you change the spacing between the
text
element and spacing between the letters too.
This text uses letter-spacing.
This text uses letter-spacing.
This text uses letter-spacing.
This text uses letter-spacing.
This text uses letter-spacing.
This text uses letter-spacing.
<p class="text-gray-500 tracking-tighter">This text uses letter-spacing.</p>
<p class="text-gray-500 tracking-tight">This text uses letter-spacing.</p>
<p class="text-gray-500 tracking-normal">This text uses letter-spacing.</p>
<p class="text-gray-500 tracking-wide">This text uses letter-spacing.</p>
<p class="text-gray-500 tracking-wider">This text uses letter-spacing.</p>
<p class="text-gray-500 tracking-widest">This text uses letter-spacing.</p>Text Decoration
Various types of text decoration can be made using different utility classes like striking out of text, underline, making text appear in upper case, making the first letter of each word capital etc.
This text has an underline.
This text has a line through it.
This text has no underline.
This text has an overline.
capitalize each word
convert to uppercase
CONVERT TO LOWERCASE
<p class="text-gray-500 underline">This text has an underline.</p>
<p class="text-gray-500 line-through">This text has a line through it.</p>
<p class="text-gray-500 no-underline">This text has no underline.</p>
<p class="text-gray-500 overline">This text has an overline.</p>
<p class="text-gray-500 capitalize">capitalize each word</p>
<p class="text-gray-500 uppercase">convert to uppercase</p>
<p class="text-gray-500 lowercase">CONVERT TO LOWERCASE</p>Line Height
leading-{type} classes of tailwind css can be used in order to set the height between lines and the value of the "lin-height" can be adjusted too. The {type} in the class name represents the desired line height.
Leading normal
leading-normal class of tailwind css helps you set normal line
height.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-900 max-w-xl text-2xl font-semibold leading-normal"> Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>Leading Tight
It not only reduces the spacing between the lines but also sets tighter line height than normal line height.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-900 max-w-xl text-2xl font-semibold leading-tight"> Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot. </p>Leading Relaxed
This style offers loser line height as compared to normal line height. It also increases the spacing between the lines.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-900 max-w-xl text-2xl font-semibold leading-relaxed"> Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot. </p>Leading Loose
It offers looser line height than leading relaxed.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p class="text-gray-900 max-w-xl text-2xl font-semibold leading-loose"> Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot. </p>Blockquote
Blockquote style can be designed easily by using following code in tailwind css as shown in the following example.
This is a blockquote.
<blockquote class="border-l-4 border-gray-500 pl-4 italic">
<p>This is a blockquote.</p>
<footer class="mt-2 text-gray-600">- Author</footer>
</blockquote>Lists
Ordered and unordered list can be created using the following code.
Unordered list:
- This is a list.
- It appears completely unstyled.
- tructurally, it's still a list.
Ordered list:
- This is a list.
- It appears completely unstyled.
- tructurally, it's still a list.
List with icons:
- This is a list.
- It appears completely unstyled.
- tructurally, it's still a list.
<ul class="space-y-1 text-gray-500 list-disc list-inside">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>tructurally, it's still a list.</li>
</ul>
<br>
<ul class="space-y-1 text-gray-500 list-decimal list-inside">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>tructurally, it's still a list.</li>
</ul>
<br>
<ul class="space-y-1 text-gray-500 list-decimal list-inside">
<li class="flex items-center space-x-3">
<svg class="w-5 h-5 stroke-green-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12L9.28722 16.2923C9.62045 16.6259 9.78706 16.7927 9.99421 16.7928C10.2014 16.7929 10.3681 16.6262 10.7016 16.2929L20 7" stroke="stroke-current" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>This is a list.</span>
</li>
<li class="flex items-center space-x-3">
<svg class="w-5 h-5 stroke-green-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12L9.28722 16.2923C9.62045 16.6259 9.78706 16.7927 9.99421 16.7928C10.2014 16.7929 10.3681 16.6262 10.7016 16.2929L20 7" stroke="stroke-current" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>It appears completely unstyled.</span>
</li>
<li class="flex items-center space-x-3">
<svg class="w-5 h-5 stroke-green-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12L9.28722 16.2923C9.62045 16.6259 9.78706 16.7927 9.99421 16.7928C10.2014 16.7929 10.3681 16.6262 10.7016 16.2929L20 7" stroke="stroke-current" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>tructurally, it's still a list.</span>
</li>
</ul>