Prose styling

One of the prominent features of the Tailwind Typography plugin is the prose class. The prose class is designed to create a consistent and readable typographic style for large blocks of text, such as paragraphs, articles, blog posts, or any other content-heavy sections of your website.

When you apply the prose class to a container element, it automatically applies a set of carefully crafted styles to enhance the readability and overall aesthetics of the text. Examples of the mentioned styles can be found below.

Headings

Styles for <h1>, <h2>, <h3> and <h4> are applied out of the box when prose class is applied to the container.

<template>
  <div class="prose">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
  </div>
</template>

Leadings

To apply leading text style,lead class must be assigned to the chosen tag.

<template>
  <div class="prose">
    <span class="lead">Leading text</span>
  </div>
</template>

Paragraph

Simple paragraph styling.

<template>
  <p class="prose">Paragraph text</p>
</template>

Quote

For quotes, please use <blockquote> tag and <figcaption> for signature.

<template>
  <figure class="prose">
    <blockquote>Quote Text</blockquote>
    <figcaption>—Signature</figcaption>
  </figure>
</template>

Figure

Figure is an example of image using <figcaption /> for capturing the picture.

<template>
  <figure class="prose">
    <img src="https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/card-3.png" alt="Example of marketing card" />
    <figcaption>The Nike Air Max 270 in action</figcaption>
  </figure>
</template>

Table

Simple example of styling tables of contents.

<template>
  <div class="prose">
    <table>
      <thead>
        <tr>
          <th>Header</th>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>Content</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

List

Simple example of styling the lists.

<template>
  <ul class="prose">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
</template>

Example content styled with prose

<template>
  <div class="prose">
    <figcaption>The New Winner</figcaption>
    <h1>Nike Air Max 270</h1>
    <span class="lead">Experience ultimate comfort and style with the Nike Air Max 270 sneakers.</span>
    <p>Paragraph text</p>
    <figure>
      <blockquote>“Every step is a cushioned stride with the Air Max 270 technology.”</blockquote>
      <figcaption>—Signature</figcaption>
    </figure>
    <p>
      Designed for athletes and sneaker enthusiasts alike, the Nike Air Max 270 combines innovative features with a
      sleek and modern design.
    </p>
    <figure>
      <img src="https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/card-3.png" alt="Example of marketing card" />
      <figcaption>The Nike Air Max 270 in action</figcaption>
    </figure>
    <hr />
    <h2>Features and Benefits</h2>
    <ul>
      <li>
        <strong>Lightweight and Breathable:</strong> The engineered mesh upper provides excellent breathability, keeping
        your feet cool and comfortable.
      </li>
      <li>
        <strong>Max Air Cushioning:</strong> The visible Max Air unit in the heel offers responsive cushioning and
        impact absorption.
      </li>
      <li>
        <strong>Durable and Flexible:</strong> The rubber outsole with flex grooves ensures durability and flexibility
        for natural foot movements.
      </li>
    </ul>
    <hr />
    <h3>Perfect for Any Occasion</h3>
    <p>
      Whether you are hitting the gym, going for a run, or simply adding a stylish touch to your everyday outfits, the
      Nike Air Max 270 is the perfect choice.
    </p>
    <p>With its versatile design and superior comfort, these sneakers are sure to become your go-to footwear option.</p>
    <p>Don't compromise on style or performance. Step up your sneaker game with the Nike Air Max 270.</p>
    <hr />
    <h4>Where to buy</h4>
    <p>
      Find the Nike Air Max 270 at authorized retailers or shop online on our website to get your hands on this iconic
      pair of sneakers.
    </p>
    <hr />
    <strong class="prose-medium">Product Specifications</strong>
    <table>
      <thead>
        <tr>
          <th>Feature</th>
          <th>Details</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Upper material</td>
          <td>Leather and mesh</td>
        </tr>
        <tr>
          <td>Sole material</td>
          <td>Rubber</td>
        </tr>
        <tr>
          <td>Closure Type</td>
          <td>Lace up</td>
        </tr>
        <tr>
          <td>Available Sizes</td>
          <td>US 6-12</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>