whatisgithub

What is tachyons?

tachyons-css/tachyons — explained in plain English

Analysis updated 2026-06-24

11,702CSSAudience · developerComplexity · 1/5Setup · easy

In one sentence

Tachyons is a 14KB CSS utility library of single-purpose class names you add directly to your HTML to control spacing, typography, colors, and layout, no custom stylesheet required.

Mindmap

mindmap
  root((tachyons))
    What it does
      Utility CSS classes
      Single purpose rules
      14KB minified
    Covers
      Spacing
      Typography
      Colors
      Layout
    Features
      Responsive design
      490 accessible colors
      Debug utility
    Compatibility
      React
      Angular
      Ember
      Rails
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Style HTML pages by adding utility class names directly in your markup without writing custom CSS rules.

USE CASE 2

Build mobile-responsive layouts using Tachyons' built-in responsive class variants for every screen size.

USE CASE 3

Use the 490 pre-checked accessible color combinations to meet contrast standards without manual testing.

USE CASE 4

Prototype UI components quickly using the component examples on the Tachyons project website.

What is it built with?

CSSHTML

How does it compare?

tachyons-css/tachyonsdevicons/deviconibm/plex
Stars11,70211,62811,355
LanguageCSSCSSCSS
Setup difficultyeasyeasyeasy
Complexity1/51/51/5
Audiencedeveloperdeveloperdesigner

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

Tachyons is a CSS library that lets you style web pages by adding small, single-purpose class names directly to your HTML elements rather than writing traditional CSS stylesheets. Instead of creating a custom class like "blue-heading" and writing a rule that sets the color, you add a pre-built class like "blue" directly in your HTML. The library covers spacing, typography, colors, layout, and responsive sizing. The design philosophy behind Tachyons is that each class does exactly one thing. This makes it straightforward to change how something looks without worrying that the change will accidentally break something else on the page. Because the classes are reused across elements rather than duplicated in custom CSS rules, the total amount of CSS the browser has to download stays small. The minified library weighs around 14 kilobytes. Tachyons is built to work at all screen sizes from mobile upward, and includes 490 color combinations that meet accessibility contrast standards. A debugging utility is included to help identify layout problems during development. The library works with plain HTML and also integrates with frameworks like React, Ember, Angular, and Rails. Getting started is as simple as adding a single link tag pointing to the CDN version of the file. Teams that want to customize the library can clone the repository and modify the source, then compile their changes with a build command. The project website includes documentation for each class and a library of example components.

Copy-paste prompts

Prompt 1
I want to add padding, a blue background, and white text to a div using Tachyons. What class names do I add to my HTML element?
Prompt 2
How do I make a Tachyons layout stack vertically on mobile and go side-by-side on desktop?
Prompt 3
I want to customize Tachyons colors. How do I clone the repo, edit the source, and build my own version of the CSS?
Prompt 4
Show me how to include Tachyons via CDN in an HTML file and style a card component with it.

Frequently asked questions

What is tachyons?

Tachyons is a 14KB CSS utility library of single-purpose class names you add directly to your HTML to control spacing, typography, colors, and layout, no custom stylesheet required.

What language is tachyons written in?

Mainly CSS. The stack also includes CSS, HTML.

How hard is tachyons to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is tachyons for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.