aphrodte react inline tachyons css

aphrodite.js

import React, {Component} from 'react'
import logo from './logo.svg'
import {StyleSheet, css} from 'aphrodite'
import t from 'tachyons-js'

class App extends Component {
  render() {
    const {styles} = App
    return (
      <div className={css(styles.App)}>
        <div className={css(styles.App_header)}>
          <img src={logo} className={css(styles.App_logo)} alt="logo"/>
          <h2>Welcome to React</h2>
        </div>
        <p className={css(styles.App_intro)}>
          To get started, edit
          <code>src/App.js</code>
          and save to reload.
        </p>
      </div>
    );
  }
}

App.styles = StyleSheet.create({
  App_logo: {
    animationName: {
      'from': {
        transform: 'rotate(0deg)'
      },
      'to': {
        transform: "rotate(360deg)"
      }
    },
    animationDuration: '20s',
    animationIterationCount: 'infinite',
    ...t.h4
  },
  App: {
    ...t.tc
  },
  App_header: {
    ...t.bg_black,
    ...t.h5,
    ...t.pa3,
    ...t.white
  },
  App_intro: {
    ...t.f3
  }
})

export default App

Ive taken create-react-app and converted it to aphrodite with tachyons-js.