Kitchen sink for tailwindcss/typography

[mickaelchanrion]

When tweaking the variables for the plugin @tailwindcss/typography, it can be very useful to see an example that covers every single stylised element. @tailwindcss/forms holds a file (kitchen-sink.html) for this use case. I could not find one for typography so I created one and sharing it here for reference.

<div class="prose mx-auto px-10">
  <h1>Title 1</h1>
  <h2>Title 2</h2>
  <h3>Title 3</h3>
  <h4>Title 4</h4>
  <h5>Title 5</h5>
  <h6>Title 6</h6>

  <div class="lead">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dolore iste eius ratione, illo quae ducimus quo, sequi odit vero odio at, non sit nulla amet modi culpa ab quibusdam!
  </div>

  <p>
    Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Ab <code>veniam aliquid</code> commodi <a href="#">deserunt sint fugit</a> praesentium quam, ut <strong>voluptate facilis</strong> vel facere iste sed harum amet animi maiores <em>asperiores architecto</em>!
  </p>

  <ol>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, <a href="#">doloremque</a>!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem est beatae rem a? Saepe facere, adipisci maxime quod dolor quidem velit quia, quae a ipsum, animi quo! Veritatis, repellat illo?</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti quo, assumenda atque soluta natus optio repellat modi neque explicabo dolorum quaerat vel error totam molestiae iste aspernatur nisi nobis. Accusamus.</li>
  </ol>

  <ul>
    <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non praesentium optio iste, voluptas unde aut mollitia cum dolor veritatis harum consectetur vel quasi ad quas dignissimos reprehenderit dolorum deleniti fuga.</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quae asperiores eligendi repellat laudantium. Ea quae, possimus minima cupiditate incidunt nobis ad sequi dolorum nulla optio explicabo labore quos repellendus.</li>
    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id dignissimos odit qui et. Facilis dolorum facere hic quae ex error atque magnam aliquid in, dolorem doloremque. Consectetur ducimus quis obcaecati.</li>
  </ul>

  <figure>
    <img src="https://placehold.co/600x400" alt="placeholder" width="600" height="400">
    <figcaption>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </figcaption>
  </figure>

  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
  </blockquote>

  <video controls width="960 " height="540">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  </video>

  <table>
    <caption class="caption-bottom">
      Council budget (in £) 2018
    </caption>
    <thead>
      <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
      </tr>
      <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
      </tr>
    </tbody>
  </table>

    <hr>

  <pre class="whitespace-pre-line">
    <span class="text-red-400">body</span> {
        <span class="text-blue-400 ml-4">color</span>: <span class="text-green-400">red</span>;
    }
  </pre>
</div>

[dandax]

You could also convert the live demo to an html file. https://play.tailwindcss.com/uj1vGACRJA?layout=preview