A17 Tailwind Plugins

v5.x.x

A series of plugins to enable/encourage systematised web design/development and some other useful utility classes.

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.

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 GitHub issue tracker.

There is a breaking change to the Layout plugin, see the migration guide or the V5 notes in the Layout docs.

Our Tailwind Setup

  • Setup guide - a walk through of our basic Tailwind setup, consuming a config JSON and applying plugins.
  • Migration guide from A17 Tailwind Plugins v4 to v5 and migrating from Tailwind v3 to v4

Available Plugins

Plugins Setup

  • Setup - the center pin of many of our plugins, creates the basis the other plugins build of
  • DevTools - generates the CSS for the grid helper (in the bottom left corner of the page)
  • ColorTokens - generates colour variables
  • ApplyColourVariables - generates utility classes
  • SpacingTokens - generates rem based spacing tokens based on pixel based scales or inputs
    • Not required in Tailwind v4

Layout

  • Spacing - generates responsive spacing classes
  • Container - generates a custom container class based on supplied config
  • Layout - generates utility classes to set elements onto the design grid
    • Breaking change from <v5.0.0 to v5.0.0:
      The format of the class names has been updated from .w-N-cols to .w-cols-N.
    • In v5.0.0 .cols-container is deprecated to be removed in v6.0.0
  • GridLayout - creates classes to handle css grid layouts
  • GridGap - generates grid gap utilities based on the configured grid

Typography

Grid gutter borders

  • GridLine - generates vertical and horizontal grid line/stroke classes (borders in the gutters between elements)
  • Keyline - generates keylines in the gutter between elements

General Styling Utilities

  • BackgroundFill - draws a 100vw background colour pseudo layer
  • StrokeFull - draws a 100vw key pseudo layer
  • Underline - generates text underline styling classes
  • FullBleedScroller - easy full bleed `overflow-x: auto` scrolling containers
  • Scrollbar - scrollbar styling, unifies the CSS standard and non-standard scrollbar styling

General Utilities

Removed Plugins in 5.x.x

The following plugins are no longer available in 5.x.x 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:

  • CssInJs - allows you to pass through CSS from your Tailwind config
  • Components - allows you to generate component CSS from your Tailwind config

Compatibility

You are currently viewing docs for 5.x.x

Tailwind version A17 Tailwind Plugins version Compatible
4.0.x 5.x.x ✅
3.4.x ==5.0.0 ✅
2.2.x 5.0.0 ⁇ 1
4.0.x <=4.0.8 ❌ 2
3.4.x <=4.0.8 ✅
2.2.x <=4.0.8 ✅ 3
  1. Untested ↩
  2. Tailwind 4 introduced lots of changes ↩
  3. As far as we know ↩