Setting up Ember CLI + SCSS + PostCSS + TailwindCSS + CSSNano

ember-cli-build.js

const postcssOptions = {
    compile: {
        enabled: false // Set compile to false to not run PostCSS *during* compliation
    },
    filter: {
        enabled: true, // Set filter to true to run PostCSS *after* compilation
        ...require("./postcss.config")
    }
};

module.exports = function (defaults) {
    const app = new EmberApp(defaults, {
        sassOptions: {
            implementation: nodeSass, // Can also use Dart Sass
            includePaths: ["vendor/some_library/_scss"],
            onlyIncluded: true
        },
        postcssOptions
    });
}

package.json

{
 "devDependencies":
  {
    "@fullhuman/postcss-purgecss": "3.0.0",
    "cssnano": "^4.1.10",
    "ember-cli-postcss": "^6.0.1",
    "ember-cli-sass": "^10.0.1",
    "node-sass": "^4.12.0", // Can also use Dart Sass
    "tailwindcss": "^1.9.4"
  }
}

postcss.config.js

const EmberApp = require("ember-cli/lib/broccoli/ember-app");
const environment = EmberApp.env();
const IS_PROD = environment === "production";
const FORCE_PURGE = process.env.FORCE_PURGE; // Can force PurgeCSS
const FORCE_CSS_NANO = process.env.FORCE_CSS_NANO; // Can force CSSNano

const SHOULD_PURGE = FORCE_PURGE === "true" || IS_PROD;
const SHOULD_CSS_NANO = FORCE_CSS_NANO === "true" || IS_PROD;

if (SHOULD_PURGE) {
    console.log("Purging CSS");
}

if (SHOULD_CSS_NANO) {
    console.log("Minifying CSS with CSSNano");
}

const purgeCSS = {
    content: [
        // add extra paths here for components/controllers which include classes
        "./app/index.html",
        "./app/templates/**/*.hbs",
        "./app/components/**/*.{hbs,js}",
        "./app/controllers/**/*.js",
        "./app/routes/**/*.js"
    ],
    safelist: [
        /drop-buttons-/,
        /tooltipster/,
        /ember-power-select/,
        /ember-basic-dropdown/,
        /cp-is-open/, // Ember Collapsible Panel
        /liquid-/ // Liquid Fire
    ],
    defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
};

module.exports = {
    plugins: [
        require("tailwindcss")("./config/tailwind/config.js"),
        ...(SHOULD_PURGE ? [require("@fullhuman/postcss-purgecss")(purgeCSS)] : []),
        ...(SHOULD_CSS_NANO ? [require("cssnano")({ preset: ["default", { calc: false }] })] : [])
    ]
};