Getting Started Principles Features Style Guide Testimonials

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.

Downloads

Css

Minified v4.12.0 Build v4.12.0

Css in Js

Styled System v0.2.0 Theme UI v0.1.0

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/[email protected]/css/tachyons.min.css"/>

or install via npm

npm install [email protected]

or grab all the source files and build+develop locally

git clone [email protected]:tachyons-css/tachyons.git
cd tachyons
rm -rf .git && git init
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.

Customizing

Tachyons has several methods and workflows for customization:

We offer an API you can post a config to get a custom css build with generated documentation.

If you prefer Css Variables check out Tachyons-custom.

Both Theme-ui and Styled-system implementations are easy to customize in theme.js We've built a GUI for generating and customizing Tachyons builds over at Components AI that will output css-in-js and css variable configs you can copy paste into your projects.

Principles

Responsive

Everything should be 100% responsive. Your website should work regardless of a user’s device or screensize.

Readable

No matter the lighting, or the device, font-sizes should be large enough and contrast should be high enough for your users to easily read your content.

Modular

Tachyons isn’t just a monolithic framework. It’s a collection of small modules that can be mixed and matched or used independently. Use what you need. Leave the rest.

Accessible

Accessibility is important to us. Throughout both the css and the documentation we provide numerous tools and methods for making it easier to maximize the accessibility of your site.

Performant

Code should be optimized for performance.

Reusable

Clear documentation helps create a shared understanding of design patterns amongst your team. This helps promote reuse and reduces the amount of redundancy in a codebase.

Features

Open source component library

There is a growing library of open source components written in static html that are easy to use as is, customize with your own theme, or port to a templating language.

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.

Multiple Flavors

Don’t like the class names? We’ve got a more verbose version you might like. Want to use Sass instead of Postcss? We‘ve got a repo for that too :) Tachyons isn’t just a css toolkit. It’s a design system. Utilized here in a react native boilerplate.

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.

Runs on Postcss

A flexible plugin framework for post-processing css. View on GitHub

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.

Start using Tachyons

Read the Docs View Component Library Download the Code

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; }