A17 Tailwind Plugins

Description

Added in v3.2.0

All you to pass through CSS in JS straight through to your output CSS.
See Tailwind's notes on CSS-in-JS.

Setup

tailwind.config.js

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

module.exports = {
  ...
  plugins: [CssInJs],
  theme: {
    css: {
      ".box": {
        "@apply mt-60 py-gutter bg-header": "",
        "--xpadding": "var(--inner-gutter)",
        "padding-right": "var(--xpadding)",
        "padding-left": "var(--xpadding)",
        "&:hover": {
          "box-shadow": "0 10px 15px rgba(0,0,0,0.2)"
        },
        "@screen lg": {
          "--xpadding": "calc(2 * var(--inner-gutter))"
        }
      }
    }
  }
  ...
};

Output

Based on the reference config above:

app.css

.box {
  margin-top: 3.75rem;
  background-color: var(--grey-10);
  padding-top: var(--inner-gutter);
  padding-bottom: var(--inner-gutter);
  --xpadding: var(--inner-gutter);
  padding-right: var(--xpadding);
  padding-left: var(--xpadding);
}

.box:hover {
  box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

@media (min-width: 990px) {
  .box {
    --xpadding: calc(2 * var(--inner-gutter));
  }
}

Your Tailwind build will error out if you @apply classes that aren't defined or if you use @screen with breakpoints that don't exist.

Note: this plugin doesn't attempt to validate your input.