@area17/a17-tailwind-plugins

A collection of Tailwind plugins to help build responsive design systems in collaboration with A17 design and development build methodologies

Usage no npm install needed!

<script type="module">
  import area17A17TailwindPlugins from 'https://cdn.skypack.dev/@area17/a17-tailwind-plugins';
</script>

README

AREA 17 Tailwind Plugins

Introduction

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.

Requirements

  • TailwindCSS
    • tested in Tailwind 2.x.x (with and without JIT) and 3.0.x

Setup

  1. Install via npm:
$ npm install @area17/a17-tailwind-plugins
  1. Include plugins in tailwind.config.js. Configs for each plugin can be found below.
const { Setup, RatioBox, Layout, GridLine, PseudoElements, DevTools, GridGap, Container, Keyline, Spacing, Typography, ColorTokens, ApplyColorVariables, Underline, Components, CssInJs, GridLayout, SpacingTokens } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...

  plugins: [Setup, Typography, Spacing, RatioBox, Layout, GridLine, PseudoElements, DevTools, GridGap, Container, Keyline, ColorTokens, Underline, Components, CssInJs, GridLayout],

  ...
};

Sample set up files

Documentation and demos

The plugins

  • 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)

  • 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

  • GridLayout - generates CSS grid utility classes to set elements onto the design grid (new in v3.3.0)

  • GridGap - generates grid gap utilities based on the configured grid

  • Typography - generates responsive typography classes

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

  • Keyline - generates keylines in the gutter between elements

  • PseudoElements - adds additional pseudo classes

  • RatioBox - generates ratio box utilities

  • Underline - generates text underline styling utilities (new in v3.1.0)

  • 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)

  • FullBleedScroller - easy full bleed overflow-x: auto scrolling containers (new in v3.6.0)

  • InteractionMediaQueries - adds interaction based media queries, think targeting devices with hover capability (new in v3.6.0)

  • Scrollbar - scrollbar styling, unifies the CSS standard and non-standard scrollbar styling (new in v3.6.0)

Breaking changes to Layout in v3.0.0

The generated class names in the Layout plugin have been changed to align them closer to Tailwind. See the migration notes and also see the changelog.

Contribution

Code of Conduct

AREA 17 is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the AREA 17 community to abide by our Code of Conduct. Please read it. Please follow it.

Adding a new plugin

See adding a new plugin

Bug reports and features submission

To submit an issue or request a feature, please do so on Github.

If you file a bug report, your issue should contain a title and a clear description of the issue. You should also include as much relevant information as possible and a code sample that demonstrates the issue. The goal of a bug report is to make it easy for yourself - and others - to replicate the bug and develop a fix.

Remember, bug reports are created in the hope that others with the same problem will be able to collaborate with you on solving it. Do not expect that the bug report will automatically see any activity or that others will jump to fix it. Creating a bug report serves to help yourself and others start on the path of fixing the problem.

Versioning scheme

Our Tailwind Plugins follows Semantic Versioning. Major releases are released only when breaking changes are necessary, while minor and patch releases may be released as often as every week. Minor and patch releases should never contain breaking changes.

When referencing Tailwind Plugins from your application, you should always use a version constraint such as ^1.0, since major releases of Tailwind Plugins will include breaking changes.