@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
271 lines (256 loc) • 9.12 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>
We also wanted to include a few utility classes that would simplify some
common styling requirements.
</p>
<p>Firstly, our Tailwind setup:</p>
<ul>
<li>
<a href="./tailwind-setup.html">tailwind-setup</a> - a walk through of our
basic Tailwind setup, consuming a config JSON and applying plugins
</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">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 (updated in <code>v3.4.0</code>)
</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
<ul>
<li>
<code>v4.0.5</code> adds logical properties
<code>margin-inline-start</code>/<code>ms-</code>,
<code>margin-inline-end</code>/<code>me-</code>,
<code>padding-inline-start</code>/<code>ps-</code>,
<code>padding-inline-end</code>/<code>pe-</code>,
<code>inset-inline-start</code>/<code>start</code> and
<code>inset-inline-end</code>/<code>end</code>
</li>
</ul>
</li>
<li>
<a href="./Container.html">Container</a> - generates a custom
container class based on supplied config (resets and more useful
breakout styles new in <code>v3.6.0</code>)
</li>
<li>
<a href="./Layout.html">Layout</a> - generates utility classes to set
elements onto the design grid
<ul>
<li>
<code>v3.6.0</code> adds <code>vw</code> based calcs variants
</li>
<li>
<code>v3.10.0</code> adds logical properties
<code>margin-inline-start</code>/<code>ms-</code>,
<code>margin-inline-end</code>/<code>me-</code>,
<code>padding-inline-start</code>/<code>ps-</code>,
<code>padding-inline-end</code>/<code>pe-</code>,
<code>inset-inline-start</code>/<code>start</code> and
<code>inset-inline-end</code>/<code>end</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 (updated in <code>v3.9.0</code> to allow
<a href="./Typography.html#overriding"
>Typography overriding styles</a
>
at breakpoints)
</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 (new in <code>v3.8.0</code>)
</li>
<li>
<a href="./StrokeFull.html">StrokeFull</a> - draws a 100vw key pseudo
layer (new in <code>v3.8.0</code>)
</li>
<li>
<a href="./Underline.html">Underline</a> - generates text underline
styling classes (new in <code>v3.1.0</code>)
</li>
<li>
<a href="./FullBleedScroller.html">FullBleedScroller</a> - easy full
bleed `overflow-x: auto` scrolling containers (new in
<code>v3.6.0</code>)
</li>
<li>
<a href="./Scrollbar.html">Scrollbar</a> - scrollbar styling, unifies
the CSS standard and non-standard scrollbar styling (new in
<code>v3.6.0</code>)
</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 (new in <code>v3.6.0</code>)
</li>
<li>
<a href="./RatioBox.html">RatioBox</a> - generates ratio box utilities
</li>
<li>
<a href="./CssInJs.html">CssInJs</a> - allows you to pass through CSS
from your Tailwind config (new in <code>v3.2.0</code>)
</li>
<li>
<a href="./Components.html">Components</a> - allows you to generate
component CSS from your Tailwind config (new in <code>v3.2.0</code>)
</li>
</ul>
</div>
</div>
<h2 class="f-h2" id="compatibility">Compatibility</h2>
<p>You are currently viewing docs for <code><=4.0.8</code></p>
<table>
<thead>
<tr>
<th>Tailwind version</th>
<th>A17 Tailwind Plugins version</th>
<th>Compatible</th>
</tr>
</thead>
<tbody class="opacity-50">
<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>
<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>
<hr>
<p>
For AREA 17 staffers used to the legacy
<a
href="https://code.area17.com/a17/fe-boilerplate/-/tree/main"
target="_blank"
>A17 Boilerplate</a
>
- these classes bring into Tailwind some of the useful classes from there
(and in return, some of the Tailwind classes have been taken back to the A17
SCSS set up).
</p>
</div>
{% include_relative includes/_footer.html %}