Building custom Tachyons (non-Sass) in Sage

sage
1

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 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. 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.
  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', since it has the former ones in its plugin list already. It should look like this when you add its 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 to this mix and you’ll get some insanely small stylesheets when building for production.

2 Likes