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://unpkg.com/tachyons@4.5.3/css/tachyons.min.css"/>

or install via npm

npm install --save-dev tachyons@4.5.3

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

Prototyping template

This template is always linked to the most up to date version of Tachyons. Save this file to your computer to start prototyping right away without worrying about setting up a dev environment. You can open the file in a web browser and view your changes.

<!DOCTYPE html> <html lang="en"> <title> </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css"> <body> </body> </html>

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

The entire library is fewer than 14kb when minified and gzipped. If you want to get even smaller, it's easy to strip out what you don't need.

Documentation

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

Functional

It's easy to build components with Tachyons so it works well with Rails, React, Ember, Elm, Angular, Static html, and more.

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

Style Guide

This is a quick introduction to some of the building blocks that Tachyons makes available. For a more in-depth look at design principles and how each module works, be sure to check out the docs

Typography

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }

Type Styles

Italicize: to write or print (text) in italics.

Some text that needs to be super bold.

This text wants to be underlined.

This text should be crossed out.

This text should be capitalized.

This text should be uppercase.


.i {         font-style: italic; }
.b {         font-weight: bold; }
.underline { text-decoration: underline; }
.strike {    text-decoration: line-through; }
.ttc {       text-transform: capitalize; }
.ttu {       text-transform: uppercase; }

Typefaces

system serif

a b c d e f g h i j k l m n o p q r s t u v w x y z

Athelas

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

georgia

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

garamond

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

baskerville

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

calisto

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

system sans-serif

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Helvetica

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Avenir Next

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Code

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Courier

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z


.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               helvetica, 'helvetica neue',
               ubuntu,
               roboto, noto,
               'segoe ui', arial,
               sans-serif;
}
.serif { font-family: georgia, times, serif; }
.code { font-family: Consolas, monaco, monospace; }
.courier { font-family: 'Courier Next', courier, monospace; }
.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
.avenir { font-family: 'avenir next', avenir, sans-serif; }
.athelas { font-family: athelas, georgia, serif; }
.georgia { font-family: georgia, serif; } 
.times { font-family: times, serif; }
.bodoni { font-family: "Bodoni MT", serif; }
.calisto { font-family: "Calisto MT", serif; }
.garamond { font-family: garamond, serif; }
.baskerville { font-family: baskerville, serif; }


Measure

Wide Measure

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Measure

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Narrow Measure

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


.measure-wide {   max-width: 34em; }
.measure {        max-width: 30em; }
.measure-narrow { max-width: 20em; }

Grids

Floats, widths, and padding can be combined to build a wide variety of grids.

fl w-100 pa2
fl w-90 pa2
fl w-10 pa2
fl w-80 pa2
fl w-20 pa2
fl w-75 pa2
fl w-25 pa2
fl w-70 pa2
fl w-30 pa2
fl w-60 pa2
fl w-40 pa2
fl w-50 pa2
fl w-50 pa2
fl w-third pa2
fl w-third pa2
fl w-third pa2
fl w-third pa2
fl w-two-third-s pa2
fl w-25 pa2
fl w-25 pa2
fl w-25 pa2
fl w-25 pa2
fl w-20 pa2
fl w-20 pa2
fl w-20 pa2
fl w-20 pa2
fl w-20 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2

Colors

Aa--dark-red: #e7040f;
Aa--red: #ff4136;
Aa--light-red: #ff725c;
Aa--orange: #ff6300;
Aa--gold: #ffb700;
Aa--yellow: #ffde37;
Aa--light-yellow: #fbf1a9;
Aa--purple: #5e2ca5;
Aa--light-purple: #a463f2;
Aa--dark-pink: #d5008f;
Aa--hot-pink: #ff41b4;
Aa--pink: #ff80cc;
Aa--light-pink: #ffa3d7;
Aa--dark-green: #137752;
Aa--green: #19a974;
Aa--light-green: #9eebcf;
--navy: #001b44;
Aa--dark-blue: #00449e;
Aa--blue: #357edd;
Aa--light-blue: #96ccff;
Aa--lightest-blue: #cdecff;
Aa--washed-blue: #f6fffe;
Aa--washed-green: #e8fdf5;
Aa--washed-yellow: #fffceb;
Aa--washed-red: #ffdfdf;


.bg-dark-red { background-color: var(--dark-red); }
.bg-red { background-color: var(--red); }
.bg-orange { background-color: var(--orange); }
.bg-gold { background-color: var(--gold); }
.bg-yellow { background-color: var(--yellow); }
.bg-purple { background-color: var(--purple); }
.bg-light-purple { background-color: var(--light-purple); }
.bg-hot-pink { background-color:  var(--hot-pink); }
.bg-dark-pink { background-color: var(--dark-pink); }
.bg-pink { background-color: var(--pink); }
.bg-dark-green { background-color: var(--dark-green); }
.bg-green { background-color: var(--green); }
.bg-navy { background-color: var(--navy); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-blue { background-color: var(--blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-lightest-blue { background-color: var(--lightest-blue); }
.bg-washed-blue { background-color: var(--washed-blue); }
.bg-washed-green { background-color: var(--washed-green); }
.bg-washed-yellow { background-color: var(--washed-yellow); }
.bg-light-pink { background-color: var(--light-pink); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-light-red { background-color: var(--light-red); }

.dark-red { color: var(--dark-red); }
.red { color: var(--red); }
.orange { color: var(--orange); }
.gold { color: var(--gold); }
.yellow { color: var(--yellow); }
.purple { color: var(--purple); }
.light-purple { color: var(--light-purple); }
.hot-pink { color:  var(--hot-pink); }
.dark-pink { color: var(--dark-pink); }
.pink { color: var(--pink); }
.dark-green { color: var(--dark-green); }
.green { color: var(--green); }
.navy { color: var(--navy); }
.dark-blue { color: var(--dark-blue); }
.blue { color: var(--blue); }
.light-blue { color: var(--light-blue); }
.lightest-blue { color: var(--lightest-blue); }
.washed-blue { color: var(--washed-blue); }
.washed-green { color: var(--washed-green); }
.washed-yellow { color: var(--washed-yellow); }
.light-pink { color: var(--light-pink); }
.light-yellow { color: var(--light-yellow); }
.light-red { color: var(--light-red); }

Borders

ba = border on all sides
bt = border top
br = border right
bb = border bottom
bl = border left
bn = border none

  .ba { border-style: solid; border-width: 1px; }
  .bt { border-top-style: solid; border-top-width: 1px; }
  .br { border-right-style: solid; border-right-width: 1px; }
  .bb { border-bottom-style: solid; border-bottom-width: 1px; }
  .bl { border-left-style: solid; border-left-width: 1px; }
  .bn { border-style: none; border-width: 0; }

Border Styles

dotted
dashed
solid
none

.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid {  border-style: solid; }
.b--none {   border-style: none; }

Border Widths

default
.125rem
.25rem
.5rem
1rem
2rem

.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }

Border Colors

b--black
b--black-90
b--black-80
b--black-70
b--black-60
b--black-50
b--black-40
b--black-30
b--black-20
b--black-10
b--black-05
b--black-025
b--black-0125
b--near-black
b--dark-gray
b--mid-gray
b--gray
b--silver
b--light-silver
b--light-gray
b--near-white
b--white
b--white-90
b--white-80
b--white-70
b--white-60
b--white-50
b--white-40
b--white-30
b--white-20
b--white-10
b--white-05
b--white-025
b--white-0125
b--dark-red
b--red
b--orange
b--gold
b--yellow
b--purple
b--light-purple
b--hot-pink
b--dark-pink
b--pink
b--dark-green
b--green
b--dark-blue
b--blue
b--light-blue
b--lightest-blue
b--washed-blue
b--washed-green
b--washed-yellow
b--light-pink
b--light-yellow
b--light-red
b--transparent

.b--black {        border-color: var(--black); }
.b--black-90 {   border-color: var(--black-90); }
.b--black-80 {   border-color: var(--black-80); }
.b--black-70 {   border-color: var(--black-70); }
.b--black-60 {   border-color: var(--black-60); }
.b--black-50 {   border-color: var(--black-50); }
.b--black-40 {   border-color: var(--black-40); }
.b--black-30 {   border-color: var(--black-30); }
.b--black-20 {   border-color: var(--black-20); }
.b--black-10 {   border-color: var(--black-10); }
.b--black-05 {   border-color: var(--black-05); }
.b--black-025 {   border-color: var(--black-025); }
.b--black-0125 {   border-color: var(--black-0125); }
.b--near-black {   border-color: var(--near-black); }
.b--dark-gray {    border-color: var(--dark-gray); }
.b--mid-gray {     border-color: var(--mid-gray); }
.b--gray {         border-color: var(--gray); }
.b--silver {       border-color: var(--silver); }
.b--light-silver { border-color: var(--light-silver); }
.b--light-gray {   border-color: var(--light-gray); }
.b--near-white {   border-color: var(--near-white); }
.b--white {        border-color: var(--white); }
.b--white-90 {   border-color: var(--white-90); }
.b--white-80 {   border-color: var(--white-80); }
.b--white-70 {   border-color: var(--white-70); }
.b--white-60 {   border-color: var(--white-60); }
.b--white-50 {   border-color: var(--white-50); }
.b--white-40 {   border-color: var(--white-40); }
.b--white-30 {   border-color: var(--white-30); }
.b--white-20 {   border-color: var(--white-20); }
.b--white-10 {   border-color: var(--white-10); }
.b--white-05 {   border-color: var(--white-05); }
.b--white-025 {   border-color: var(--white-025); }
.b--white-0125 {   border-color: var(--white-0125); }
.b--dark-red { border-color:  var(--dark-red); }
.b--red { border-color:  var(--red); }
.b--orange { border-color:  var(--orange); }
.b--gold { border-color:  var(--gold); }
.b--yellow { border-color:  var(--yellow); }
.b--purple { border-color:  var(--purple); }
.b--light-purple { border-color:  var(--light-purple); }
.b--hot-pink { border-color:  var(--hot-pink); }
.b--dark-pink { border-color:  var(--dark-pink); }
.b--pink { border-color:  var(--pink); }
.b--dark-green { border-color:  var(--dark-green); }
.b--green { border-color:  var(--green); }
.b--navy { border-color:  var(--navy); }
.b--dark-blue { border-color:  var(--dark-blue); }
.b--blue { border-color:  var(--blue); }
.b--light-blue { border-color:  var(--light-blue); }
.b--lightest-blue { border-color:  var(--lightest-blue); }
.b--washed-blue { border-color:  var(--washed-blue); }
.b--washed-green { border-color:  var(--washed-green); }
.b--washed-yellow { border-color:  var(--washed-yellow); }
.b--light-pink { border-color:  var(--light-pink); }
.b--light-yellow { border-color:  var(--light-yellow) }
.b--light-red { border-color:  var(--light-red); }
.b--transparent { border-color: var(--transparent); }

Border Radii

br1
br2
br3
br3

pill
br--bottom
br--top

br--left
br--right

.br0 {        border-radius: 0; }
.br1 {        border-radius: .125rem; }
.br2 {        border-radius: .25rem; }
.br3 {        border-radius: .5rem; }
.br4 {        border-radius: 1rem; }
.br-100 {     border-radius: 100%; }
.br-pill {    border-radius: 9999px; }
.br--bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.br--top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.br--right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.br--left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

Hover Animations

Grow
Dim

.grow {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.25s ease-out;
}

.grow:hover,
.grow:focus {
  transform: scale(1.05);
}

.dim {
  opacity: 1;
  transition: opacity .15s ease-in;
}
.dim:hover,
.dim:focus {
  opacity: .5;
  transition: opacity .15s ease-in;
}

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 at Facebook

Tachyons has seriously blown my mind. Making landing pages responsive is now… somehow… actually fun?!

Ian Storm Taylor Co-founder of Segment.com

I used Tachyons for the first time on goldenstaterecord.com. Really fast to make big changes to the design in-flight. 👍

Wilson Miner Digital Design - The California Sunday Magazine

Tachyons is powerful, obvious, and well documented. It's made me rethink my approach to building organized and componentized CSS. I highly recommend you try it.

Dustin Senos Designer