Browser support and how to deal with out of date browsers

Browser	Version
Safari	14+
Firefox	75+
Chrome	80+
Edge	80+

This part is very important, read it carefully. JGC should work without errors or warnings on new browsers like Chrome, Firefox, Safari, Opera and Edge, as well as on iOS and Android devices. As I said before, the CSS is not included.

The JGC layouts require Tailwind to be installed on your site. In other words, JGC supports the same browsers that Tailwind supports. In addition, JGC makes extensive use of ES6 functions (see below).

If you need more compatibility, you should optimize the CSS file generated by Tailwind and transpile the JS. This part is TOTALLY up to you. An example (that is not perfect at all but it's a start...)

PostCSS

var colorConverter = require("postcss-color-converter");
var postcssCustomProperties = require("postcss-custom-properties");
var cssvariables = require("postcss-css-variables");
var colorrgb = require("postcss-color-rgb");
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    cssvariables(),
    colorConverter({
      preserve: false,
      outputColorFormat: "rgba",
    }),
    postcssCustomProperties(),
    colorrgb(),
  ],
};

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": "> 0.25%, ie >= 11" // change this parameter, if you want
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5",
      }
    ]
  ],
}

The result is still not quite compatible with older browsers. You can add manually some polyfills (maybe they are a duplicate?).

<!-- Your Tailwind file -->
<link rel="stylesheet" href="tailwind.css' }}" />
<!-- For IE 11+ and simlar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"></script>
<!-- Polifyll if NOT loaded with Babel -->
<script src="https://unpkg.com/core-js-bundle@3.6.5/minified.js"></script>
<!-- JGC -->
<script src="/js/justgoodcookies/dist/justgoodcookies.min.js"></script>

The result now is:

Browser	Version
Safari	8+ (style1 recommended)
Firefox	50+
Chrome	50+
Edge	15+
IE	10/11+ (style1 recommended)

A quick trick (that I do not know if I like or not 🤔) is to also load the latest Tailwind CDN. The newest browsers will take those settings and the old ones will use your optimized CSS:

Example:

<link rel="stylesheet" href="css/custom.css" />
<!-- This is the trick -->
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"></script>
<script src="https://unpkg.com/core-js-bundle@3.6.5/minified.js"></script>
<script src="/js/justgoodcookies/dist/justgoodcookies.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<!-- And this is for the page -->
<script>
  tailwind.config = {
    prefix: "jgc-",
  };
</script>

I know, at first glance it looks like a duplicate (then it depends a lot on your configuration). Custom.css can be the fallback solution for old browsers, while cdn.tailwindcss.com is the real CSS of the page. Otherwise, and this is probably the best solution, you can manually optimize the CSS to make it more compatible.

If you have better ideas, please let me know.

⚠️ If you or your company need even more compatibility I recommend using a different library ⚠️