A17 Tailwind Plugins

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.

We also wanted to include a few utility classes that would simplify some common styling requirements.

Firstly, our Tailwind setup:

  • tailwind-setup - a walk through of our basic Tailwind setup, consuming a config JSON and applying plugins

And then, the our plugins themselves:

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 (updated in v3.4.0)

Layout

  • Spacing - generates responsive spacing classes
    • v4.0.5 adds logical properties margin-inline-start/ms-, margin-inline-end/me-, padding-inline-start/ps-, padding-inline-end/pe-, inset-inline-start/start and inset-inline-end/end
  • Container - generates a custom container class based on supplied config (resets and more useful breakout styles new in v3.6.0)
  • Layout - generates utility classes to set elements onto the design grid
    • v3.6.0 adds vw based calcs variants
    • v3.10.0 adds logical properties margin-inline-start/ms-, margin-inline-end/me-, padding-inline-start/ps-, padding-inline-end/pe-, inset-inline-start/start and inset-inline-end/end
  • 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 (new in v3.8.0)
  • StrokeFull - draws a 100vw key pseudo layer (new in v3.8.0)
  • Underline - generates text underline styling classes (new in v3.1.0)
  • FullBleedScroller - easy full bleed `overflow-x: auto` scrolling containers (new in v3.6.0)
  • Scrollbar - scrollbar styling, unifies the CSS standard and non-standard scrollbar styling (new in v3.6.0)

General Utilities

  • PseudoElements - adds additional pseudo classes
  • InteractionMediaQueries - adds interaction based media queries, think targeting devices with hover capability (new in v3.6.0)
  • RatioBox - generates ratio box utilities
  • CssInJs - allows you to pass through CSS from your Tailwind config (new in v3.2.0)
  • Components - allows you to generate component CSS from your Tailwind config (new in v3.2.0)

For AREA 17 staffers used to the legacy A17 Boilerplate - 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).

Tested in Tailwind 2.x.x (with and without JIT) and 3.2.x.