Pattern Library

<div
  class="
    bg-black text-white
    [&_p]:!text-white
    [&_h1]:!text-white
    [&_h2]:!text-white
    [&_h3]:!text-white
    [&_h4]:!text-white
    [&_h5]:!text-white
    [&_h6]:!text-white
  "
>
  {% include "patterns/atoms/text/paragraph.html" %}
</div>

<div
  class="
    bg-pirati-yellow text-black
    [&_p]:!text-black
    [&_h1]:!text-black
    [&_h2]:!text-black
    [&_h3]:!text-black
    [&_h4]:!text-black
    [&_h5]:!text-black
    [&_h6]:!text-black
  "
>
  {% include "patterns/atoms/text/paragraph.html" %}
</div>

<div
  class="
    bg-white text-black
    [&_p]:!text-black
    [&_h1]:!text-black
    [&_h2]:!text-black
    [&_h3]:!text-black
    [&_h4]:!text-black
    [&_h5]:!text-black
    [&_h6]:!text-black
  "
>
  {% include "patterns/atoms/text/paragraph.html" %}
</div>

<div
  class="
    bg-black text-white
    [&_p]:!text-white
    [&_h1]:!text-white
    [&_h2]:!text-white
    [&_h3]:!text-white
    [&_h4]:!text-white
    [&_h5]:!text-white
    [&_h6]:!text-white
  "
>
  <div class="prose">
    {% include "patterns/atoms/text/headings.html" %}
  </div>
</div>

<div
  class="
    bg-pirati-yellow text-black
    [&_p]:!text-black
    [&_h1]:!text-black
    [&_h2]:!text-black
    [&_h3]:!text-black
    [&_h4]:!text-black
    [&_h5]:!text-black
    [&_h6]:!text-black
  "
>
  <div class="prose">
    {% include "patterns/atoms/text/headings.html" %}
  </div>
</div>

<div
  class="
    bg-white text-black
    [&_p]:!text-black
    [&_h1]:!text-black
    [&_h2]:!text-black
    [&_h3]:!text-black
    [&_h4]:!text-black
    [&_h5]:!text-black
    [&_h6]:!text-black
  "
>
  <div class="prose">
    {% include "patterns/atoms/text/headings.html" %}
  </div>
</div>