Customizing Tachyons
Tachyons, if you haven’t heard, is incredible. It’s often called an atomic (or functional) CSS library, but if you spend enough time with it, you come to realize it’s something else entirely: a powerful and expressive framework for defining and consuming design system primitives.
The problem, then, is that not every design system will use the same primitives. While Tachyons has some great default settings to help you achieve just about any design you please, you often need to tweak some of those properties: a different color palette, or type scale, or you have sizing needs outside of the scope of the defaults. How should you go about customizing this CSS file that has nearly every property:value pair in CSS?
The simplest solution is the most oft-overlooked: just frickin’ copy the files into your project and start hacking away. The good folks over at Tachyons HQ even cooked up a CLI so you don’t have to goof around with a build process.
Sass has come to be the defacto CSS preprocessor. It brings a bunch of goodies to CSS: nesting, functions, and of course, variables. This makes it a great way to consume and customize libraries. And wouldn’t you know it, there’s an official Sass fork of Tachyons ready to be brought into the fold of your Sass projects.
Did you know that nearly every Tachyons module is available independently on npm? If you only need to customize a few of them (like, say, the typography scale), you can simply replace the default modules for your custom ones. The downside to this is that you have to import every single module you want to use into your project, but the folks over at Egghead don’t seem to mind.
Much like Sass before it, CSS itself is getting variable functionality (and browser support is pretty good too). Wouldn’t it be great if Tachyons used this new syntax to define all of the properties we’d like to update? Meet tachyons-custom, who I’m sure you saw standing just off stage-right over there. Simply include it in your project, and because CSS custom properties follow the cascade, any of your variables will overwrite the Tachyons defaults.
Tachyons HQ is hard at work developing a Tachyons Generator. This tool allows you to describe your Tachyons variables in JSON and have a full-on version of Tachyons spit back out at you. This is the tool I am most excited about, because it has the potential to completely automate all of the other customization options we just went over while also being more expressive and powerful. And that’s a beautiful thing.