Tailwind, postcss-import, & cssnext media queries

banner.css

.c-banner {
    ...
    height: 400px;
    outline: 5px solid red;

    /* Breakpoints ========================================================= */

    @media (--tablet) {
        height: 500px;
    }

    @media (--desktop) {
        height: 55vh;
    }
}

styles.css

@import "tailwindcss/preflight";

@import "utils/utils";
@import "components/banner";

@import "tailwindcss/utilities";

@custom-media --phone (min-width: 544px);
@custom-media --tablet (min-width: 768px);
@custom-media --desktop (min-width: 992px);
@custom-media --desktop-lg (min-width: 1200px);