styled-components ❤ tachyons

Component.js

// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.

// 1. Use .attrs to define classNames that should always be applied to a styled component
//    Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
//    See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
  className: 'bw0-l',
})`
  color: blue;
`

<Component /> // has bw0-1 class applied!

// 2. Use the Tachyons className in the JSX
//    styled-components doesn't force you to not use any classes so this works like with any other component
const Component = styled.div`
  color: blue;
`

// Add the Tachyons class when you render the component
<Component className="bw0-1" />

You need to add an empty string literal at the end of the function like so:

export const Main = styled.main.attrs({
  className: "center w-50 sans-serif"
})``
//^^