@area17/a17-tailwind-plugins/docs/v4/Setup.html

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

---
title: Setup
---

{% include_relative includes/_header.html %}

<div class="copy">
  <h2 id="description">Description</h2>

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

  <h2 id="setup">Setup</h2>

  <figure class="code-example">
    <figcaption class="code-example-filename">tailwind.config.js</figcaption>
    <pre
      class="code-example-code"
    ><code class="language-javascript">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"
    },
  }
  ...
};</code></pre>
  </figure>

  <h2 id="output">Output</h2>

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

  <figure class="code-example">
    <figcaption class="code-example-filename">app.css</figcaption>
    <pre class="code-example-code"><code class="language-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;
  }
}</code></pre>
  </figure>

  <h2 id="notes">Notes</h2>

  <p>These values are used in:</p>

  <ul>
    <li><code>Container</code></li>
    <li><code>DevTools</code></li>
    <li><code>GridGap</code></li>
    <li><code>GridLine</code></li>
    <li><code>Keyline</code></li>
    <li><code>Layout</code></li>
    <li><code>GridLayout</code></li>
  </ul>

  <p>Which means <code>Setup</code> is required for each of those.</p>

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

  <figure class="code-example">
    <figcaption class="code-example-filename">application.js</figcaption>
    <pre
      class="code-example-code"
    ><code class="language-javascript">window.getComputedStyle(document.body).getPropertyValue('--breakpoint');</code></pre>
  </figure>
</div>

{% include_relative includes/_footer.html %}