Create fast loading, highly readable, and
100% responsive interfaces with as little css as possible.
Modules can be altered, extended, or changed to meet your design needs.
You shouldn't need to write css everytime you want to build a new
ui component. By learning the composable building blocks in tachyons, you
can quickly start to build out interfaces while writing little to no css.
Each module is carefully documented. From stats about the size of the module,
to how each css class will render to the screen.
Don't let the cascade slow you down. When you apply a class
to an element, there is nothing in the cascade to override
its effects. You get rapid feedback on how your css is
affecting your markup without wasting time debugging why your
styles are being overridden.
The majority of Tachyons selectors have a specificity of
10. Tachyons won't override your existing styles. So feel
free to lay it on top of your existing css.
Accessible Color Palette
Over 280 accessible color combinations.
Base classes are mobile by default. Can be overridden by
namespaced classes targeting larger breakpoints.
Small css modules for debugging stacking and layout issues.
Can easily be turned on or off during development.
Construct anything from complex layouts to responsive components with a series of
single purpose classes.
Tachyons is meant to be edited and customized to meet the
needs of your project. It's just css. It isn't precious.
Don't be afraid to change: class names, media queries,
breakpoints, or values.
Used by people at
Here’s why I think designing systems with tools/frameworks like Tachyons
is a Good Idea™.
Design Systems break as they scale (either scaling org or
scaling product) because new components/variants of a component
are introduced. Those variants sometimes (read: often) go
undocumented, leading to duplication when that
component/variant is needed (and created) again. Even when the
component is documented, documenting effectively often means
dozens/hundreds of instances to capture all states/variants.
Systems like Tachyons et al. approach this problem by instead
documenting and limiting *properties* of components. (I like
to think of this as “subatomic” design.)
You then create
components by composing subatomic components (properties).
Rather than creating a component and its variants, you simply
have a comprehensive list of “ingredient” subatomic components.
Those subatomic components can be combined in thousands of ways
to create hundreds of components. The properties of those
components are numerous, but constrained to a set of acceptable
values (our subatomic components).”
After I embraced the “lots of little classes” way of styling, my anger at CSS
almost completely went away and I was much more easily able to style and modify
a design... you really have to try it.
It turns out composing utilities together like that is a really nice way to style things.
Adam Morse has taken this to its logical conclusion with Tachyons...
It seems silly at first to write code that looks like inline HTML
styling but Tachyons works. Instead of wasting time hunting down
and dealing with CSS overrides, I now spend time iterating on the
design... which is what we're supposed to be doing in the first
I’ve found extremely low-level “frameworks” like BassCSS and Tachyons useful recently. They let you do the whole “just add and remove classes to create elements” thing but also don’t lock you into the constraints and issues of higher level frameworks like Bootstrap.
CSS frameworks shouldn't be one-size-fits-all. Tachyons nails it
with its modular approach, eliminating bloat from day one.
Tachyons nails everything you need from a CSS framework.
Development goes faster, designs are more consistent, and best of
all it’s a ton of fun to play with.
I never understood how people did font ratios and table layouts nicely with CSS until @mrmrs showed me the light.
Tachyons enabled the aboutLife team to more easily reason
about, debug, and change visual styles all while thinking
_less_ about CSS. We’re able to achieve our desired
designs more quickly than ever before.