Tailwind Typography

Responsive Typography built with Tailwind. Use different typography classes to change the leading and the decoration of the text.


Font Size

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

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

    
        
    

Font Weight

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

Tailwind Elements

        
            
    <p class="font-thin text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-extralight text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-light text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-normal text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-medium text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-semibold text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-bold text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-extrabold text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-black text-dark-800 text-2xl">Tailwind Elements</p>

    
        
    

Line Height

.leading-none

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.

.leading-tight

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.

.leading-snug

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.

.leading-normal

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.

.leading-relaxed

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.

.leading-loose

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.

        
            
    <p class="text-blue-600 mb-2">.leading-none</p>
    <p class="leading-none text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-tight</p>
    <p class="leading-tight text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-snug</p>
    <p class="leading-snug text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-normal</p>
    <p class="leading-normal text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-relaxed</p>
    <p class="leading-relaxed text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-loose</p>
    <p class="leading-loose text-gray-800">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>

    
        
    

Lists

.list-disc

  • Sleep
  • Exercise
  • Nutrition

.list-decimal

  1. Sleep
  2. Exercise
  3. Nutrition

list default

  • Sleep
  • Exercise
  • Nutrition
        
            
    <p class="text-blue-600 mb-2">.list-disc</p>
    <ul class="list-disc text-gray-800 mb-6 pl-4">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>
    
    <p class="text-blue-600 mb-2">.list-decimal</p>
    <ol class="list-decimal text-gray-800 mb-6 pl-4">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ol>
    
    <p class="text-blue-600 mb-2">list default</p>
    <ul class="text-gray-800">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>

    
        
    

List Position

.list-inside

  • Sleep
  • Exercise
  • Nutrition

.list-outside

  • Sleep
  • Exercise
  • Nutrition
        
            
    <p class="text-blue-600 mb-2">.list-inside</p>
    <ul class="list-disc list-inside text-purple-800 mb-6 bg-purple-200 rounded-lg">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>
  
    <p class="text-blue-600 mb-2">.list-outside</p>
    <ul class="list-disc list-outside text-purple-800 bg-purple-200 rounded-lg">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>
    
    
        
    

Text Decoration

.underline

Send me a copy of this message

.line-through

Send me a copy of this message

        
            
    <p class="text-blue-600 mb-2">.underline</p>
    <p class="underline text-gray-800 mb-6">Send me a copy of this message</p>

    <p class="text-blue-600 mb-2">.line-through</p>
    <p class="line-through text-gray-800">Send me a copy of this message</p>

    
        
    

If you are looking for more advanced options, try Bootstrap Typography from MDBootstrap.