https://github.com/jamiller619/tachyons.js

Tachyons helper function for JavaScript. Built with PostCSS Modules.
https://github.com/jamiller619/tachyons.js

css css-in-js css-modules postcss postcss-modules tachyons tachyons-css

Last synced: 12 days ago
JSON representation

Tachyons helper function for JavaScript. Built with PostCSS Modules.

• Host: GitHub
• URL: https://github.com/jamiller619/tachyons.js
• Owner: jamiller619
• License: mit
• Created: 2018-10-26T00:22:46.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-05T00:37:06.000Z (about 1 year ago)
• Last Synced: 2024-04-29T22:13:05.667Z (7 months ago)
• Topics: css, css-in-js, css-modules, postcss, postcss-modules, tachyons, tachyons-css
• Language: JavaScript
• Size: 88.9 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tachyons.js

Easily add [tachyons](https://tachyons.io) to your project when using a bundler. Built with [PostCSS](https://postcss.org) & [PostCSS Modules](https://github.com/css-modules/postcss-modules).

## Setup

The setup is a two-step process:

- Include the `'@jamr/tachyons.js'` file in your JavaScript

  files where needed. This exposes a single function that

  accepts tachyon css class names as a string or array of strings.

- Include, only once, the tachyons css. This can be done via

  an import statement in a css file, or by including it in a

  style tag in your html.

## Example

```javascript

import tachyons from '@jamr/tachyons.js'

const classNames = 'pa3 center sans-serif'

// or

const classNames = ['pa3', 'center', 'sans-serif']

const App = () => 


```


and in your a css file:

```css

@import '@jamr/tachyons.js/tachyons.css';

```

### More info

The three main files:

- tachyons.js - The helper file to use in your import statements.

- tachyons.css - The unmodified tachyons.css file that needs to be included in your site/app.

- tachyons.css.json - The JSON mapping with transformed class names generated by PostCSS Modules.