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 inv3.4.0
)
Layout
-
Spacing - generates responsive spacing
classes
-
v4.0.5
adds logical propertiesmargin-inline-start
/ms-
,margin-inline-end
/me-
,padding-inline-start
/ps-
,padding-inline-end
/pe-
,inset-inline-start
/start
andinset-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
addsvw
based calcs variants -
v3.10.0
adds logical propertiesmargin-inline-start
/ms-
,margin-inline-end
/me-
,padding-inline-start
/ps-
,padding-inline-end
/pe-
,inset-inline-start
/start
andinset-inline-end
/end
-
- GridLayout - creates classes to handle css grid layouts
- GridGap - generates grid gap utilities based on the configured grid
Typography
-
Typography - generates responsive
typography classes (updated in
v3.9.0
to allow Typography overriding styles at breakpoints)
Grid gutter borders
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
.