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.

Leadings

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

Paragraph

Simple paragraph styling.

Quote

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

Figure

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

Table

Simple example of styling tables of contents.

List

Simple example of styling the lists.

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>