using tachyons in ember.js

app.css

@import './tachyons/tachyons'; // tachyons source 

@import './_custom'; // any custom css
@import './_vars'; // put last because that is how CSS vars work...

/*
in _vars.css you can override tachyons vars

:root {
  --navy: #001624;
  --red: #D11149;
}
*/

ember-cli-build.js

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var postcssCssnext = require('postcss-cssnext');
var postcssImport = require('postcss-import');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        enabled: true,
        plugins: [{
          module: postcssImport
        }, {
          module: postcssCssnext
        }]
      },
      filter: {
        enabled: false
      }
    }
  });

  return app.toTree();
};

package.json

devDependencies: {
  ...
  "ember-cli-postcss": "3.1.0",
  "postcss-cssnext": "^2.9.0",
  "postcss-import": "^9.0.0"
}