Creative Tim Logo Soft UI Flowbite

Tailwind CSS Typography

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

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

We have listed some of the commonly used typography classes that we use, 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.

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

<p class="text-xs dark:text-white">Creative Tim</p>
<p class="text-sm dark:text-white">Creative Tim</p>
<p class="text-base dark:text-white">Creative Tim</p>
<p class="text-lg dark:text-white">Creative Tim</p>
<p class="text-xl dark:text-white">Creative Tim</p>
<p class="text-2xl dark:text-white">Creative Tim</p>
<p class="text-3xl dark:text-white">Creative Tim</p>
<p class="text-4xl dark:text-white">Creative Tim</p>
<p class="text-5xl dark:text-white">Creative Tim</p>
<p class="text-6xl dark:text-white">Creative Tim</p>
<p class="text-7xl dark:text-white">Creative Tim</p>
<p class="text-8xl dark:text-white">Creative Tim</p>
<p class="text-9xl dark:text-white">Creative Tim</p>

Font Weight

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

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim

Creative Tim 

<p class="font-thin dark:text-white">Creative Tim</p>
<p class="font-extralight dark:text-white">Creative Tim</p>
<p class="font-light dark:text-white">Creative Tim</p>
<p class="font-normal dark:text-white">Creative Tim</p>
<p class="font-medium dark:text-white">Creative Tim</p>
<p class="font-semibold dark:text-white">Creative Tim</p>
<p class="font-bold dark:text-white">Creative Tim</p>
<p class="font-extrabold dark:text-white">Creative Tim</p>
<p class="font-black dark:text-white">Creative Tim</p>

Line Height

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

.leading-none

Creative Tim 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

Creative Tim 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

Creative Tim 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

Creative Tim 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

Creative Tim 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

Creative Tim 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 dark:text-gray-400">
  Creative Tim was created to bring quality ...
</p>
<p class="leading-tight dark:text-gray-400">
  Creative Tim was created to bring quality ...
</p>
<p class="leading-snug dark:text-gray-400">
  Creative Tim was created to bring quality ...
</p>
<p class="leading-normal dark:text-gray-400">
  Creative Tim was created to bring quality ...
</p>
<p class="leading-relaxed dark:text-gray-400">
  Creative Tim was created to bring quality ...
</p>
<p class="leading-loose dark:text-gray-400">
  Creative Tim 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 dark:text-gray-400">
  <li>Design</li>
  <li>Develop</li>
  <li>Test</li>
</ul>

<ol class="list-decimal dark:text-gray-400">
  <li>Design</li>
  <li>Develop</li>
  <li>Test</li>
</ol>

<ul class=" dark:text-gray-400">
  <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 dark:text-gray-400">
  <li>Design</li>
  <li>Develop</li>
  <li>Test</li>
</ul>

<ul class="list-disc list-outside dark:text-gray-400">
  <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 dark:text-gray-400">please read our terms and services</p>
<p class="line-through dark:text-gray-400">
  please read our terms and services
</p>

If you want more details about Typography component, please check the official docs on Flowbite.

Copied code to clipboard!