# Building custom Tachyons (non-Sass) in Sage

**URL:** https://discourse.roots.io/t/building-custom-tachyons-non-sass-in-sage/11605
**Category:** sage
**Tags:** sage9
**Created:** 2018-02-14T10:19:15Z
**Posts:** 1

## Post 1 by @knowler — 2018-02-14T10:19:16Z

I’ve been doing a ton of projects with Roots tools lately (when am I not though?), so I’ve been posting a bit. This guide is a way of me documenting (and sharing) how I setup [Tachyons](http://tachyons.io/) in most new Sage installs.

Personally, I prefer a mostly plain CSS syntax, so this guide will setup use the original version rather than [the Sass one](https://github.com/tachyons-css/tachyons-sass). And most importantly, I prefer to include Tachyons _not as a dependency, but rather as a starter kit_. This allows me to modify Tachyons to define my own design system. This is more true to how Tachyons is meant to be used in the first place.

# How to build custom Tachyons in Sage (quickly)

1. Choose “None” for your CSS framework option when installing Sage.
2. Remove everything from `resources/assets/styles` — even `main.scss`.
  - You can organize things however you want here, but for the sake of demonstration, let’s just make things simple remove it all.
  - Note: deleting `autoload/` will mess things up if you are choosing to use Font Awesome.

3. Clone and move the contents of Tachyons’ `src` folder in to `resources/assets/styles` and rename `tachyons.css` to `main.css`.
  - Instead of using the main repo, for easier customization use [`tachyons-custom`](https://github.com/tachyons-css/tachyons-custom) which consolidates all the variables into [a single partial](https://github.com/tachyons-css/tachyons-custom/blob/master/src/_variables.css).

4. Change the extension of the stylesheet to `.css` in `resources/assets/config.json`.
5. Run `yarn add --dev tachyons-build-css`.
6. In `postcss.config.js`, remove `cssnano` and `autoprefixer` and add the `getPlugins` function from [`'tachyons-build-css'`](https://github.com/tachyons-css/tachyons-build-css), since it has the former ones in its plugin list already. It should look like this when you add its [options](https://github.com/tachyons-css/tachyons-build-css#options):
```
// resources/assets/build/postcss.config.js

/* eslint-disable */
const { getPlugins } = require('tachyons-build-css');

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: getPlugins({
      minify: options.enabled.optimize ? true : false,
      plugins: [my(), other(), plugins()] // Optional: any other plugins you’ve got as an array.
    }),
  };
};
```

And that’s all. Now you’re set up to customize Tachyons however you want so you can design with speed and not headaches. [Add Purgecss](https://discourse.roots.io/t/removing-unused-css-with-purgecss-uncss/11586/) to this mix and you’ll get some insanely small stylesheets when building for production.