Skip to content
Get packs

Guide · Open source

How to use Tachyons: CDN setup, classes and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

Tachyons is a CSS library made of small, single-purpose classes that you add directly to HTML elements. This guide shows how to include it on a page, build a local copy with npm, and style content by combining classes. By the end you will know where to find the docs and which tools help you look up classes.

Tachyonstachyons-css/tachyons · ★ 11.7k · MIT

Quick start

  1. 1Choose your setup. Use the CDN for a quick start, or set up locally with npm if you want to edit or build the CSS.
  2. 2Add the stylesheet. For the CDN, put the unpkg link to tachyons.min.css in the head of your HTML file.
  3. 3Clone the repository. For local setup, run git clone on the Tachyons GitHub repository.
  4. 4Install dependencies. Enter the tachyons folder and run npm install.
  5. 5Build the CSS. Run npm start to compile and watch, or npm run build for a single build.
  6. 6Apply classes to HTML. Add single-purpose classes directly to your elements and combine them to style the page.
  7. 7Check for collisions. Run npm run mutations if you use other CSS and want to confirm no class is defined twice.

What Tachyons is and when to use it

Tachyons is described as functional CSS for humans. Instead of writing your own stylesheet, you combine classes for spacing, color, or layout to style a page. The README says the library is lightweight (about 14kB) and designed to be responsive and mobile-first.

It suits developers who want to prototype or build a UI quickly, and teams that want a consistent 8px spacing grid and a fixed color palette. It is less suited to projects already built on a large framework such as Bootstrap or Tailwind, since class sets may overlap and conflict, or to teams that want a fully custom visual identity, because the look and class naming are opinionated.

Add Tachyons with the CDN

The quickest way to start is to include a reference to the minified file in the head of your HTML file. The CDN option requires no Node.js or npm.

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

Set up Tachyons locally with npm

For a local setup, clone the repository from GitHub and install dependencies through npm. This step needs Node.js and npm installed.

  • Clone the repository from GitHub.
  • Enter the folder and install dependencies with npm.
git clone https://github.com/tachyons-css/tachyons.git cd tachyons npm install

Build or edit the CSS

To edit the code yourself, use the files in the src directory as a starting point. Running npm start outputs both minified and unminified CSS to the css directory and watches src for changes. If you only want a single build without watching, run npm run build.

  • npm start: compiles the CSS and watches the src directory for changes.
  • npm run build: builds the CSS once without watching.
  • npm run mutations: checks that each class is defined only once, useful for spotting naming collisions.
npm start npm run build npm run mutations

Learn the classes and where to look them up

The docs are at tachyons.io/docs, and the component examples are at tachyons.io/components. The README also lists community resources: DWYL Learn Tachyons for tutorials, Tachyons TLDR for quick class, scale and color lookup, and Tachyons Pro, a quiz for memorizing class names.

  • Docs: http://tachyons.io/docs
  • Component examples: http://tachyons.io/components
  • Quick lookup: Tachyons TLDR

Get help and find examples

If you have a question, open an issue on the Tachyons GitHub repository or join the Tachyons Slack channel. The README also lists featured sites that use Tachyons in production, and a longer list is kept in sites.md.

What people use it for

  • Prototyping a new interface quickly with plain HTML
  • Styling a React, Ember, Angular or Rails front end with utility classes
  • Keeping spacing and colors consistent across a team using the 8px grid and fixed palette
  • Tweaking layouts directly in the browser during design review

Frequently asked questions

Is Tachyons free to use?

The repository is licensed under MIT. The source does not describe pricing beyond that, so check the license file in the repository for the full terms.

Do I need Node.js to use Tachyons?

No. Node.js and npm are only needed for a local setup. The CDN option requires none, and you only add a link to the minified CSS file.

How do I install Tachyons?

The quickest method is the CDN link in the head of your HTML. For a local setup, clone the GitHub repository, then run npm install inside the tachyons folder.

Does Tachyons work with React or Bootstrap?

The README says Tachyons works well with plain HTML, React, Ember, Angular and Rails. Avoid mixing it with Bootstrap or Tailwind without care, since class sets may overlap and conflict.

What are the alternatives to Tachyons?

The comparable projects listed are Tailwind CSS, Bootstrap, Bulma and Open Props. Pick based on whether you want utility classes, a component framework or a design token system.

How do I fix class name conflicts?

Run npm run mutations. It is a linter that checks that each class is defined only once, which helps when you also use other CSS.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Tachyons suits developers and designers who want to build responsive, consistent UI quickly with utility classes and a small file size. It is a poor fit for projects already built on Bootstrap or Tailwind, or for teams that need a fully custom visual identity.

Install options & downloads