Tachyons
v4.1.1

Built for designing.

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.

Getting Started

Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.

<link rel="stylesheet" href="https://npmcdn.com/tachyons@4.1.1/css/tachyons.min.css"/>

or install via npm

npm install --save-dev tachyons@4.1.1

or grab all the source files and build+develop locally

git clone git@github.com:tachyons-css/tachyons.git
cd tachyons
npm install && npm start

Start a New Project

Get setup and running with this ~7 minute screencast. Download the project and learn how to customize the tachyons source files and recompile the css using the postcss build system.

Features

Lightweight

Less than 9.5kb minified and gzipped.

Documentation

Each module is carefully documented. From stats about the size of the module, to how each css class will render to the screen.

Shallow Cascade

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.

Low Specificity

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.

Mobile-first architecture

Base classes are mobile by default. Can be overridden by namespaced classes targeting larger breakpoints.

Layout debugging

Small css modules for debugging stacking and layout issues. Can easily be turned on or off during development.

Composable classes

Construct anything from complex layouts to responsive components with a series of single purpose classes.

Cohesive design system

Scale based on the powers of two. Starting at .25

Responsive Grid

Infinitely nestable. Fully fluid. Extremely light-weight.

Easy to Customize and extend

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

Testimonials

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).”

Daniel Eden Designer / Engineer at Facebook

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.

Dave Copeland - Software Engineer at StitchFix

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...

Ben Smithett - Developer

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 place :)

Jason Li - Illustrator & Designer

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.

Cole Peters - Designer

CSS frameworks shouldn't be one-size-fits-all. Tachyons nails it with its modular approach, eliminating bloat from day one.

Philip Ardeljan - Designer

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.

Lachlan Campbell - Designer / Developer

I never understood how people did font ratios and table layouts nicely with CSS until @mrmrs showed me the light.

Nat Welch - Software Engineer at Hillary for America

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.