@area17/a17-tailwind-plugins/docs/PseudoElements.html

A collection of Tailwind plugins to help build responsive design systems in collaboration with A17 design and development build methodologies

---
title: PseudoElements
---

{% include_relative includes/_header.html %}

<div class="copy">
  <h2 id="description">Description</h2>

  <p><strong>Note:</strong> Tailwind 3+ includes most, if not all, of these psuedo elements. Its likely you don't need this plugin.</p>

  <p>Adds more CSS pseudo-elements support as variants:</p>

  <ul>
    <li><code>after</code></li>
    <li><code>backdrop</code></li>
    <li><code>before</code></li>
    <li><code>cue</code></li>
    <li><code>first-letter</code></li>
    <li><code>first-line</code></li>
    <li><code>grammar-error</code></li>
    <li><code>marker</code></li>
    <li><code>placeholder</code></li>
    <li><code>selection</code></li>
  </ul>

  <h2 id="setup">Setup</h2>

  <figure class="code-example">
    <figcaption class="code-example-filename">tailwind.config.js</figcaption>
    <pre
      class="code-example-code"
    ><code class="language-javascript">const { PseudoElements } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [PseudoElements]
</code></pre>
  </figure>

  <h2 id="output">Output</h2>

  <p>
    This plugin will output pseudo classes variants:
  </p>

  <h2 id="demo">Demo</h2>

  <ul>
    <li class="marker:content-['⛄️'] marker:text-red">Snowman emoji <code>li</code> marker</li>
  </ul>

  <figure class="code-example">
    <figcaption class="code-example-filename">document.html</figcaption>
    <pre
      class="code-example-code"
    ><code class="language-html">&lt;class="marker:content-['⛄️'] marker:text-red">...&lt;/li></code></pre>
  </figure>
</div>

{% include_relative includes/_footer.html %}