@area17/a17-tailwind-plugins
Version:
A collection of Tailwind plugins to help build responsive design systems in collaboration with A17 design and development build methodologies
249 lines (232 loc) • 8.54 kB
HTML
---
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><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">↩</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">↩</a></li>
<li id="compatibility-3">As far as we know <a href="#compatibility-3-ref">↩</a></li>
</ol>
</td>
</tr>
</tfoot>
</table>
</div>
{% include_relative includes/_footer.html %}