How to add Tachyons to a css file in React

Question

I get how to add Tachyons to use them for instance like this

`<div>
  <div className="f4 bg-green blue">Example</div>
 </div>`

but how can you make to use in a CSS file so that you can make your own class (which I've seen before) something like

`.example {
   @extension .f4;
   @extension .bg-green;
   @extension .blue;
 }`

I've tried googling and looking for examples but can't exactly find what I'm trying to do. I'd rather just have a className instead of a ton of tachyons

Answer 1

By using this type of format you can use tachyons in html (link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/)

Answer 2

What you would like to do is possible with string concatenation.

Here is an example component which defines a style made up of different Tachyons classes as a string, and then applies it to a few list items:

export default function MyComponent() {
  // this following does what you are asking about
  const myStyle = "f4 bg-green blue";
  return (
    <ul>
       <li className={myStyle}>a</li>
       <li className={myStyle}>b</li>
       <li className={myStyle}>c</li>
    </ul>
  );
};

Hope this helps!