EMBER: Using classNameBindings for dynamic Tachyons classes based on properties. This also includes a hasEmotion mixin I've used on a project to handle branding colors.

has-emotion.js

import Ember from 'ember';

export default Ember.Mixin.create({
  kind: null,

  classNameBindings: [
    'hasEmotion:white',
    'hasEmotion:hover-white',
    'hasEmotion:focus-white',
    'isAngry:bg-bad',
    'isAngry:border-bad',
    'isHappy:bg-happy',
    'isHappy:border-happy',
    'isWary:bg-warn',
    'isWary:border-warn',
    'isFyi:bg-fyi',
    'isFyi:border-fyi'
  ],

  isHappy: Ember.computed('kind', function() {
    return this.get('kind') === 'happy' || this.get('kind') === 'yay';
  }),


  isFyi: Ember.computed('kind', function() {
    return this.get('kind') === 'fyi' || this.get('kind') === 'yo';
  }),


  isWary: Ember.computed('kind', function() {
    return this.get('kind') === 'wary' || this.get('kind') === 'warn';
  }),

  isAngry: Ember.computed('kind', function() {
    return this.get('kind') === 'angry' || this.get('kind') === 'love';
  }),

  hasEmotion: Ember.computed('kind', function() {
    return this.get('isHappy') ||
           this.get('isAngry') ||
           this.get('isWary') ||
           this.get('isFyi');
  })
});

item.js

import Ember from 'ember';

export default Ember.Component.extend({
  active: false,
  
  classNames: 'db link f4 pb3 pt4',
  classNameBindings: 'cx',
  
  cx: Ember.computed('active', function () {
    return this.get('active') ? 'bb bw2 b--light-blue dark-gray' : 'gray'
  })
});