SoulType

Preview

HTML

<div class="mb-16 max-w-p">

<p class="type-intro">Intro type: wntil now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p>
<p class="type-p">Basic paragraph, by default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>
<p class="type-p">By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>


</div>

<div class="mb-16">

<p class="type-mega">Type Mega. Build better.</p>

<p class="type-p">By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>

<p class="type-huge">Type Huge. Build better Beaver Builder sites, quickly.</p>

<p class="type-p">By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>

<p class="type-display">Type Display. Build better Beaver Builder sites, quickly.</p>

<p class="type-p">By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>


<p class="type-h1">Type H1. Build better Beaver Builder sites, quickly.</p>

<p class="type-p">By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>

<h2 class="type-h2">Type h2 - what to expect from here on out</h2>

<p class="type-p">What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like <strong>bold text</strong>, unordered lists, ordered lists, code blocks, block quotes, <em>and even italics</em>.</p>

<h3 class="type-h3">Type h3 - typography should be easy</h3>

<p class="type-p max-w-3xl">Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.</p>

<p class="type-p max-w-3xl">Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.</p>

<h4 class="type-h4">Type h4 - Use me sparingly, dawg.</h3>


</div>

<p class="type-0">Type0 The quick brown fox jumped over the lazy dog.</p>
<p class="type-1">Type1 The quick brown fox jumped over the lazy dog.</p>
<p class="type-2">Type2 The quick brown fox jumped over the lazy dog.</p>
<p class="type-3">Type3 The quick brown fox jumped over the lazy dog.</p>
<p class="type-4">Type4 The quick brown fox jumped over the lazy dog.</p>
<p class="type-5">Type5 The quick brown fox jumped over the lazy dog.</p>
<p class="type-6">Type6 The quick brown fox jumped over the lazy dog.</p>
<p class="type-7">Type7 The quick brown fox jumped over the lazy dog.</p>
<p class="type-8">Type8 The quick brown fox jumped over the lazy dog.</p>
<p class="type-9">Type9 The quick brown fox jumped over the lazy dog.</p>
<p class="type-10">Type10 The quick brown fox jumped over the lazy dog.</p>