A17 Tailwind Plugins

Description

Takes structure information from the config and generates a series of :root variables which are used by other A17 Tailwind Plugins.

Setup

tailwind.config.js

const { Setup } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Setup],
  theme: {
    screens: {
      xs: "0",
      sm: "544px",
      md: "650px",
      lg: "990px",
      xl: "1300px",
      xxl: "1520px"
    },
    mainColWidths: {
      xs: "auto",
      sm: "auto",
      md: "auto",
      lg: "auto",
      xl: "auto",
      xxl: "1440px"
    },
    innerGutters: {
      xs: "10px",
      sm: "15px",
      md: "20px",
      lg: "30px",
      xl: "40px",
      xxl: "40px"
    },
    outerGutters: {
      xs: "20px",
      sm: "30px",
      md: "40px",
      lg: "40px",
      xl: "40px",
      xxl: "0px"
    },
    columnCount: {
      xs: "4",
      sm: "4",
      md: "8",
      lg: "12",
      xl: "12",
      xxl: "12"
    },
  }
  ...
};

Output

Based on the reference config mentioned in this guide, we would get the following in our CSS:

app.css

:root {
  --breakpoint: "xs";
  --container-width: unset;
  --inner-gutter: 10px;
  --outer-gutter: 20px;
  --grid-columns: 4;
}

@media (min-width: 544px) {
  :root {
    --breakpoint: "sm";
    --container-width: unset;
    --inner-gutter: 15px;
    --outer-gutter: 30px;
    --grid-columns: 4;
  }
}

@media (min-width: 650px) {
  :root {
    --breakpoint: "md";
    --container-width: unset;
    --inner-gutter: 20px;
    --outer-gutter: 40px;
    --grid-columns: 8;
  }
}

@media (min-width: 990px) {
  :root {
    --breakpoint: "lg";
    --container-width: unset;
    --inner-gutter: 30px;
    --outer-gutter: 40px;
    --grid-columns: 12;
  }
}

@media (min-width: 1300px) {
  :root {
    --breakpoint: "xl";
    --container-width: unset;
    --inner-gutter: 40px;
    --outer-gutter: 40px;
    --grid-columns: 12;
  }
}

@media (min-width: 1520px) {
  :root {
    --breakpoint: "xxl";
    --container-width: 1440px;
    --inner-gutter: 40px;
    --outer-gutter: 0px;
    --grid-columns: 12;
  }
}

Notes

These values are used in:

Container
DevTools
GridGap
GridLine
Keyline
Layout
GridLayout

Which means Setup is required for each of those.

As these variables are on the :root, they are easily read by JavaScript. For example to know which is the currently active CSS breakpoint in JavaScript, you could read the --breakpoint variable:

application.js

window.getComputedStyle(document.body).getPropertyValue('--breakpoint');