Skip to content

Instantly share code, notes, and snippets.

@mxstbr mxstbr/Component.js
Last active Jun 18, 2019

What would you like to do?
styled-components ❤ tachyons
// 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:
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" />

This comment has been minimized.

Copy link

p0k8h commented Feb 16, 2018

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


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

class Home extends Component {
  render() {
    return (
          <div className="tc">
              title="Photo of a kitty staring at you"
              Parwat Kunwar
            <Title>Dayahang rai</Title>
          <P>k cha ho maiya</P>

export default Home;


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


This comment has been minimized.

Copy link

JikkuJose commented Feb 22, 2018

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"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.