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 2 months 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 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-04T22:45:54.000Z (about 8 years ago)
- Last Synced: 2024-11-30T15:38:44.248Z (11 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