styled-tachyons
v1.1.0
Published
Mix tachyons into styled-components.
Downloads
24
Maintainers
Readme
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;
`;