Tailwind CSS Typography - Flowbite

Use the typography and the utility classes from Tailwind CSS to style text with FlowBite

The typography for FlowBite is completely based on the utility classes from Tailwind CSS.

We have listed some of the commonly used typography classes that we use throughout the FlowBite UI, however, you can also check out all of the utility classes on the Tailwind CSS documentation directly.

Font Size

Use the following text-{size} utility classes from Tailwind to set the font size for any text element.

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

<p class="text-xs">FlowBite</p>
<p class="text-sm">FlowBite</p>
<p class="text-base">FlowBite</p>
<p class="text-lg">FlowBite</p>
<p class="text-xl">FlowBite</p>
<p class="text-2xl">FlowBite</p>
<p class="text-3xl">FlowBite</p>
<p class="text-4xl">FlowBite</p>
<p class="text-5xl">FlowBite</p>
<p class="text-6xl">FlowBite</p>
<p class="text-7xl">FlowBite</p>
<p class="text-8xl">FlowBite</p>
<p class="text-9xl">FlowBite</p>

Font Weight

Use the following font-{weight} utility classes to set the font weight for any text element.

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

FlowBite

<p class="font-thin">FlowBite</p>
<p class="font-extralight">FlowBite</p>
<p class="font-light">FlowBite</p>
<p class="font-normal">FlowBite</p>
<p class="font-medium">FlowBite</p>
<p class="font-semibold">FlowBite</p>
<p class="font-bold">FlowBite</p>
<p class="font-extrabold">FlowBite</p>
<p class="font-black">FlowBite</p>

Line Height

Use the following leading-{type} utility classes to set the line height for any text element.

.leading-none

Themesberg was created to bring quality code and templates together. They use unique and new design trends created solely by their team and innovate the process of developers by their products.

.leading-tight

Themesberg was created to bring quality code and templates together. They use unique and new design trends created solely by their team and innovate the process of developers by their products.

.leading-snug

Themesberg was created to bring quality code and templates together. They use unique and new design trends created solely by their team and innovate the process of developers by their products.

.leading-normal

Themesberg was created to bring quality code and templates together. They use unique and new design trends created solely by their team and innovate the process of developers by their products.

.leading-relaxed

Themesberg was created to bring quality code and templates together. They use unique and new design trends created solely by their team and innovate the process of developers by their products.

.leading-loose

Themesberg was created to bring quality code and templates together. They use unique and new design trends created solely by their team and innovate the process of developers by their products.

<p class="leading-none">Themesberg was created to bring quality ...</p>
<p class="leading-tight">Themesberg was created to bring quality ...</p>
<p class="leading-snug">Themesberg was created to bring quality ...</p>
<p class="leading-normal">Themesberg was created to bring quality ...</p>
<p class="leading-relaxed">Themesberg was created to bring quality ...</p>
<p class="leading-loose">Themesberg was created to bring quality ...</p>

Lists

Use the following code to create list items with ordered and unordered lists.

.list-disc

  • Design
  • Develop
  • Test

.list-decimal

  1. Design
  2. Develop
  3. Test

.list-default

  • Design
  • Develop
  • Test
<ul class="list-disc">
    <li>Design</li>
    <li>Develop</li>
    <li>Test</li>
</ul>

<ol class="list-decimal">
    <li>Design</li>
    <li>Develop</li>
    <li>Test</li>
</ol>

<ul>
    <li>Design</li>
    <li>Develop</li>
    <li>Test</li>
</ul>

List position

Use the list-inside and list-outside classes to set the list item position inside a list component.

.list-inside

  • Design
  • Develop
  • Test
.list-outside
  • Design
  • Develop
  • Test
<ul class="list-disc list-inside">
    <li>Design</li>
    <li>Develop</li>
    <li>Test</li>
</ul>

<ul class="list-disc list-outside">
    <li>Design</li>
    <li>Develop</li>
    <li>Test</li>
</ul>

Text Decoration

You can use the following classes to set the text decoration for any inline text element.

.underline

please read our terms and services

.line-through

please read our terms and services

<p class="underline">please read our terms and services</p>

Copied code to clipboard!