Tachyons: How does tachyons keep everything meaningful?

[FateRiddle]

So I'm trying out tachyons + React.
The structure of the demo was:

<div className="App">
  <div className="Sidebar" />
  <div className="Main">
    <div className="Headbar" />
    <div className="Wrapper">
      <MyList />
    </div>
  </div>
</div>

then with tachyons it becomes

      <div className="flex bg-washed-blue w-100 vh-100">
        <div className="bg-washed-green w5" />
        <div className="vh-100 w-100 bg-white-70 flex flex-column">
          <div className="bg-light-yellow vh-25" />
          <div className="w-60 bg-gold h-100">
            <MyList />
          </div>
        </div>
      </div>

I don't read any meaning out of it anymore, and I wonder how to deal with this?
do I go with meaningless class like:

      <div className="flex bg-washed-blue w-100 vh-100">
        <div className="Sidebar bg-washed-green w5" />
        <div className="Main vh-100 w-100 bg-white-70 flex flex-column">
          <div className="Headbar bg-light-yellow vh-25" />
          <div className="Wrapper w-60 bg-gold h-100">
            <MyList />
          </div>
        </div>
      </div>

And one side questions, why flexbox don't have anything to set up "flex: 2 3 20rem"? No grow, no shrink, no flex-basis?

[mrmrs]

I would use something like data-component="sidebar" if you want to name a section of a component. I like to keep classes for css - not naming components.

[cmnstmntmn]

@FateRiddle you could try to use style objects

var styles = {
   sidebar: 'w-60 bg-gold h-100',
   nav: 'w-100 bg-red ba b--red'
}

then use them like

<div classNames={styles.sidebar}>
   <nav classNames={styles.nav}>
       navigation
   </nav>
</div>

[FateRiddle]

@cmnstmntmn A big part why I use tachyons is to write and tweak css inline. And you can't subtract everything css from a component apparently, some tag may not necessarily named.