tachyons-for-styled-components
Beaware that you need to use snake_cased
rather than kebab-cased
Thanks to : Adam Morse for http://tachyons.io/ Jon Gold for https://github.com/jongold/tachyons-js and also https://styled-components.com/
Install with npm i.e
npm install styled-components-tachyons
Add tachyons css variables somewhere in your project. Below are some of the default tachyons variables (some excluded for brevity). Alternatively you could import
variables.css from this respository via your favorite bundler (webpack etc.).
Example usage
import styled from 'styled-components'import tachyons from 'styled-components-tachyons' const Article = styledarticle` font-family: athelas, georgia, serif; background-color: var(--yellow);`const Main = styleddiv` background:url(./static/009.jpg) no-repeat center;`const Header = styledheader` `const Div = styleddiv` `const H1 = styledh1` `const H2 = styledh2` `const H3 = styledh3` `const P = styledp` `const Blockquote = styledblockquote` `const Cite = styledcite` ` <Article> <Main _100 _100 _dark_gray > <Div _mid > <Header > <H2 _title >Issue Six</H2> <H3 _title >Summer MMXVI</H3> </Header> <H1 _headline_l _60 >The Chronicles</H1> <Blockquote _copy > <P _70 > the space you put between the notes that make the music </P> <Cite _normal >Massimo Vignelli</Cite> </Blockquote> </Div> </Main> <Div _wide _copy > <H1 _title>The repercussion of ugliness is endless</H1> <p> The choice of paper size is one of the first of any given work to be printed There are two basic paper size systems in the world: the international A sizes and the American sizes </p> <p> The international Standard paper sizes called the A series is based on a golden rectangle the divine proportion It is extremely handsome and practical as well It is adopted by many countries around the world and is based on the German DIN metric Standards The United States uses a basic letter of ugly proportions and results in complete chaos with an endless amount of paper sizes It is a by_product of the culture of free enterprise competition and waste Just another example of the misinterpretations of freedom </p> <p> These are the basic DIN sizes in mm for : A0 841x1189 _ A1 594x841 _ A2 420x594 _ A3 297x420 _ A4 210x297 _ A5 148x210 _ A6 105 x148 _ A7 74x 105 _ A8 52x74 _ A9 37x52 _ A10 26x37 </p> <p> The A4 is the basic size for stationary Two thirds of it is a square a nice economical happenstance resulting from the golden rectangle It is one of the reasons we tend to use as much as possible the DIN sizes: proportions are always leading to other nice proportions </p> <p> This does not happen with the American basic size which leads to nothing I counted 28 different standard sizes in USA! The only reason we use it is because everybody in USA uses it all stationary in USA is that size so are manilla folders les and of ce equipment! The repercussion of ugliness is endless </p> </Div> </Article>