---
index: true
title: A17 Tailwind Plugins
---

{% include_relative includes/_header.html %}

<div class="copy">
  <p>
    A series of plugins to enable/encourage systematised web design/development
    and some other useful utility classes.
  </p>

  <p>
    AREA 17 strongly believes in design systems and then using these systems to
    build products for both ourselves and our clients. Tailwind is thus a
    natural fit for us, but we wanted more "system" to the utilities to tie
    closer to our design methodology.
  </p>

  <p>
    Version 5 of this plugin, updated in response to Tailwind's release of its version 4 required several refactors. You can report any issues in our <a href="https://github.com/area17/tailwind-plugins/issues" target="_blank">GitHub issue tracker</a>.
  </p>

  <p>
    There is a <strong>breaking change</strong> to the Layout plugin, see the <a href="./migrating.html">migration guide</a> or the <a href="./Layout.html#v5-0-0">V5 notes in the Layout docs</a>.
  </p>

  <h2 class="f-h2">Our Tailwind Setup</h2>

  <ul>
    <li>
      <a href="./tailwind-setup.html">Setup guide</a> - a walk through of our
      basic Tailwind setup, consuming a config JSON and applying plugins.
    </li>
    <li><a href="./migrating.html">Migration guide</a> from A17 Tailwind Plugins <code>v4</code> to <code>v5</code> and migrating from Tailwind <code>v3</code> to <code>v4</code></li>
  </ul>

  <h2 class="f-h2" id="plugins">Available Plugins</h2>

  <div class="grid gap-gutter md:grid-cols-2 mb-60 !max-w-full">
    <div>
      <h3 class="f-h3">Plugins Setup</h3>
      <ul>
        <li>
          <a href="./Setup.html">Setup</a> - the center pin of many of our
          plugins, creates the basis the other plugins build of
        </li>
        <li>
          <a href="./DevTools.html">DevTools</a> - generates the CSS for the
          grid helper (in the bottom left corner of the page)
        </li>
        <li>
          <a href="./ColorTokens.html">ColorTokens</a> - generates colour
          variables
        </li>
        <li>
          <a href="./ApplyColourVariables.html">ApplyColourVariables</a> -
          generates utility classes
        </li>
        <li>
          <a href="./SpacingTokens.html">SpacingTokens</a> - generates
          <code>rem</code> based spacing tokens based on pixel based scales or
          inputs
          <ul>
            <li>Not required in Tailwind v4</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="border-t border-t-secondary pt-20 md:border-t-0 md:pt-0">
      <h3 class="f-h3">Layout</h3>
      <ul>
        <li>
          <a href="./Spacing.html">Spacing</a> - generates responsive spacing
          classes
        </li>
        <li>
          <a href="./Container.html">Container</a> - generates a custom
          container class based on supplied config
        </li>
        <li>
          <a href="./Layout.html">Layout</a> - generates utility classes to set
          elements onto the design grid
          <ul>
            <li>
              <a href="./Layout.html#v5-0-0">Breaking change</a> from <code>&lt;v5.0.0</code> to <code>v5.0.0</code>: <br>
              The format of the class names has been updated from <code>.w-N-cols</code> to <code>.w-cols-N</code>.
            </li>
            <li>In <code>v5.0.0</code> <code>.cols-container</code> is deprecated to be removed in <code>v6.0.0</code></li>
          </ul>
        </li>
        <li>
          <a href="./GridLayout.html">GridLayout</a> - creates classes to handle
          css grid layouts
        </li>
        <li>
          <a href="./GridGap.html">GridGap</a> - generates grid gap utilities
          based on the configured grid
        </li>
      </ul>
    </div>
    <div class="border-t border-t-secondary pt-20">
      <h3 class="f-h3">Typography</h3>
      <ul>
        <li>
          <a href="./Typography.html">Typography</a> - generates responsive
          typography classes with ability to
          <a href="./Typography.html#overriding"
            >override styles at breakpoints</a
          >
        </li>
      </ul>
    </div>
    <div class="border-t border-t-secondary pt-20">
      <h3 class="f-h3">Grid gutter borders</h3>
      <ul>
        <li>
          <a href="./GridLine.html">GridLine</a> - generates vertical and
          horizontal grid line/stroke classes (borders in the gutters between
          elements)
        </li>
        <li>
          <a href="./Keyline.html">Keyline</a> - generates keylines in the
          gutter between elements
        </li>
      </ul>
    </div>
    <div class="border-t border-t-secondary pt-20">
      <h3 class="f-h3">General Styling Utilities</h3>
      <ul>
        <li>
          <a href="./BackgroundFill.html">BackgroundFill</a> - draws a 100vw
          background colour pseudo layer
        </li>
        <li>
          <a href="./StrokeFull.html">StrokeFull</a> - draws a 100vw key pseudo
          layer
        </li>
        <li>
          <a href="./Underline.html">Underline</a> - generates text underline
          styling classes
        </li>
        <li>
          <a href="./FullBleedScroller.html">FullBleedScroller</a> - easy full
          bleed `overflow-x: auto` scrolling containers
        </li>
        <li>
          <a href="./Scrollbar.html">Scrollbar</a> - scrollbar styling, unifies
          the CSS standard and non-standard scrollbar styling
        </li>
      </ul>
    </div>
    <div class="border-t border-t-secondary pt-20">
      <h3 class="f-h3">General Utilities</h3>
      <ul>
        <li>
          <a href="./PseudoElements.html">PseudoElements</a> - adds additional
          pseudo classes
        </li>
        <li>
          <a href="./InteractionMediaQueries.html">InteractionMediaQueries</a> -
          adds interaction based media queries, think targeting devices with
          hover capability
        </li>
        <li>
          <a href="./RatioBox.html">RatioBox</a> - generates ratio box utilities
        </li>
      </ul>
    </div>
  </div>

  <h2 class="f-h2" id="removed-plugins">Removed Plugins in <code>5.x.x</code></h2>

  <p>The following plugins are no longer available in <code>5.x.x</code> due to incompatibility with Tailwind 4. You'll need to move any styles specified in your config to inside your CSS if you used these plugins:</p>

  <ul>
    <li>
      <a href="./v4/CssInJs.html">CssInJs</a> - allows you to pass through CSS
      from your Tailwind config
    </li>
    <li>
      <a href="./v4/Components.html">Components</a> - allows you to generate
      component CSS from your Tailwind config
    </li>
  </ul>

  <h2 class="f-h2" id="compatibility">Compatibility</h2>

  <p>You are currently viewing docs for <code>5.x.x</code></p>

  <table>
    <thead>
      <tr>
        <th>Tailwind version</th>
        <th>A17 Tailwind Plugins version</th>
        <th>Compatible</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>4.0.x</code></td>
        <td><code>5.x.x</code></td>
        <td>✅</td>
      </tr>
      <tr>
        <td><code>3.4.x</code></td>
        <td><code>==5.0.0</code></td>
        <td>✅</td>
      </tr>
      <tr>
        <td><code>2.2.x</code></td>
        <td><code>5.0.0</code></td>
        <td>⁇ <sup><a href="#compatibility-1" id="compatibility-1-ref">1</a></sup></td>
      </tr>
    </tbody>
    <tbody class="opacity-50">
      <tr>
        <td><code>4.0.x</code></td>
        <td><code><=4.0.8</code></td>
        <td>❌ <sup><a href="#compatibility-2" id="compatibility-2-ref">2</a></sup></td>
      </tr>
      <tr>
        <td><code>3.4.x</code></td>
        <td><code><=4.0.8</code></td>
        <td>✅</td>
      </tr>
      <tr>
        <td><code>2.2.x</code></td>
        <td><code><=4.0.8</code></td>
        <td>✅ <sup><a href="#compatibility-3" id="compatibility-3-ref">3</a></sup></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">
          <ol class="f-ui">
            <li id="compatibility-1">Untested <a href="#compatibility-1-ref">&#8617;</a></li>
            <li id="compatibility-2">Tailwind 4 introduced <a href="https://tailwindcss.com/docs/upgrade-guide#changes-from-v3" target="_blank">lots of changes</a> <a href="#compatibility-2-ref">&#8617;</a></li>
            <li id="compatibility-3">As far as we know <a href="#compatibility-3-ref">&#8617;</a></li>
          </ol>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

{% include_relative includes/_footer.html %}