https://github.com/sammdec/tachyons-as-props

Exposes Tachyons class names as properties
https://github.com/sammdec/tachyons-as-props

css-in-js styled-jsx tachyons

Last synced: about 1 month ago
JSON representation

Exposes Tachyons class names as properties

• Host: GitHub
• URL: https://github.com/sammdec/tachyons-as-props
• Owner: sammdec
• License: mit
• Created: 2017-09-04T22:36:50.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-04T22:45:54.000Z (about 7 years ago)
• Last Synced: 2024-03-23T00:23:32.649Z (8 months ago)
• Topics: css-in-js, styled-jsx, tachyons
• Language: CSS
• Homepage:
• Size: 32.2 KB
• Stars: 7
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# tachyons-as-props

> Exposes Tachyons class names as properties

Can be used with solutions like `styled-jsx` (that allows you to write css-in-js as a string) to access all of tachyons as properties on a npm module.

## Install 

```bash

$ npm install --save tachyons-as-props

```

## Usage

The export is an object with the class names mapped as object properties, one thing to note is that all classnames are converted to camelCase and dashes are removed.

e.g 

- `near-black` becomes `nearBlack`

- `bg-washed-green` becomes `bgWashedGreen`

```js

import tachyons from 'tachyons-as-props'

const SomeReactComponent = () => (

  


  {`

    .red-box {

      ${tachyons.w3}

      ${tachyons.red}

      ${tachyons.h3}

    }

  `}

  

)

```


## Related & inspiration

- [tachyons](https://github.com/tachyons-css/tachyons) - Without tachyons this wouldnt exist

- [tachyons-components](https://github.com/jxnblk/tachyons-components)

- [tachyons-js](https://github.com/jongold/tachyons-js) - Perfect for react inline styling

## License 

MIT Sam Mason