linonetwo / styled-tachyons

Mix tachyons into styled-components.

styled-tachyons

Mix tachyons into styled-components. Try it out in stackblitz.

Usages

Put tachyons class names in ty template literal tag:

import styled from 'styled-components';
import ty from 'styled-tachyons';

const Article = styled.article`
  ${ty`
    bg-black ph2 ph3_m
  `};
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
`;

You can use kebab-cased bg-black or snake_cased ph3_m or camelCase bgBlue.

don't forget to inject the variables

import { injectGlobal } from 'styled-components';
import { tachyonsVariables }  from 'styled-tachyons';

injectGlobal`
  ${tachyonsVariables};
`;

with other styled-components libs

Put function that returns a tachyons class names:

import styled from 'styled-components';
import is from 'styled-is';
import ty from 'styled-tachyons';

const Article = styled.article`
  ${ty`
    ${is('black')`
      bg-black
    `};
    ph2
    ${({ fine }) => fine && 'ph3_m'}
  `};
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
`;