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" />

Hey, I created two separate files. a component and a style file

Home.js

import React, { Component } from "react";
import { Article, Image, Main, Title, P } from "../../styledComponents";

class Home extends Component {
  render() {
    return (
      <Main>
        <Article>
          <div className="tc">
            <Image
              src="http://tachyons.io/img/avatar_1.jpg"
              title="Photo of a kitty staring at you"
              alt="dddsd"
            >
              Parwat Kunwar
            </Image>
            <Title>Dayahang rai</Title>
          </div>
          <P>k cha ho maiya</P>
        </Article>
      </Main>
    );
  }
}

export default Home;

style.js

import styled from "styled-components";

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

export const Article = styled.article.attrs({
  className: "w-100 bb b--black-05 pb2 mt2 flex items-center justify-between"
});

export const Image = styled.img.attrs({
  className: "ba b--black-10 db br-100 w2 w3-ns h2 h3-ns mr2"
});

export const Title = styled.title.attrs({
  className: "f6 f5-ns fw6 lh-title black mv0"
});

export const P = styled.p.attrs({
  className: "lh-copy measure center f6 black-70"
});

But nothing is rendered and an error is thrown instead! Any Help

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"
})``
//^^