Last updated on 3 April 2018.
Since its initial release just over three years ago, Tachyons CSS has steadily gaining steam within the web developer/design community. Along with that is a burgeoning community as well as a slew of articles and tutorials about the project. Here I've compiled and annotated a list of top learning resources for Tachyons based on what I've seen in the community and in my own reading.
Note: this list is specifically about Tachyons CSS and does not tackle the theoretical merits/demerits of functional/atomic CSS. For the high-level debate about functional/atomic versus BEM versus Bootstrap, check out John Polacek's The Case for Atomic CSS and Varun Vachhar's Awesome Functional CSS.
For curious on-lookers, doubters & passers-by
The community favorite is currently Simon Vrachliotis' great four-part series, Full re-write in 10 days with tachyons and functional CSS: A case study:
- Why re-write in the first place?
- What even is functional CSS?
- The refactoring process, step by step
- The aftermaths: key learnings and recommendations
From a more abstract level, Tachyons co-creator Adam Morse' treatise on CSS and Scalability outlines why Tachyons CSS was created and why many currently-popular practices around CSS scale very poorly.
And if you're up for a raging debate with a stubborn party, check out this Github issue: How is tachyons different from inline styles?
Other notable articles
- Is Tachyons the right CSS framework for me? (Disclaimer: I wrote this!)
- Why you should use tachyons to make CSS easier
- Switching to Functional CSS
- Why I use Tachyons CSS part 2: it eliminates unnecessary design smells (Disclaimer: I wrote this!)
- Takeaways from trying out Tachyons CSS after ages using BEM
- Our Path to MVP: Tachyons
- Learn Tachyons: Convert Your Bootstrap Columns
And if you prefer listening/watching over reading:
- Podcast: The Changelog #272: Functional CSS and Tachyons with Adam Morse
- Video: Adam Morse: Tachyons CSS Toolkit – Meteor Devshop London June 2016
Or if tweetstorms are your jam, check out Daniel Eden's Here’s why I think designing systems with tools/frameworks like Tachyons is a Good Idea™ 😆
For those experimenting with & using Tachyons
- Tachyons TLDR – class lookups!
- Tachyons: Resources – the related projects section is a must see.
- The official Tachyons component library – easy to copy and paste componenents!
- Tachy.Tools – "these tools can serve as starter templates for projects. Tachyons makes it really easy to re-use components ♻️ to extend 🚀 these templates into full sites or products."
- Are you a Tachyons Pro? – learn Tachyons by memorizing the class names via an interactive learn-by-playing mini-site.
- CSS Utility Classes and "Separation of Concerns"
- Functional CSS - The Good, The Bad, and Some Protips for React.js Users
- Tachyons + Styled Components = Pure Joy
- Customizing Tachyons
- What is the best way to package a common set of classes together? – a Github discussion
- egghead's CSS tutorials about Tachyons 💰
- Explaining the Tachyons CMS/Nested module (Disclaimer: I wrote this!)
- Building and shipping functional CSS
And last but not least, join us on the Tachyons community slack channel if you have further questions, comments or simply want to share some of your work.
Got a resource that was really helpful to you that I'm missing? Let me know in the comments below.