Tachyons
A small, utility-class CSS library for building layouts without writing custom CSS.
- Stars
- 11.7k
- Forks
- 659
- Licence
- MIT
- Language
- CSS
- Last update
- 4 months ago
- Type
- Library
What it is
Tachyons is a CSS library made of small single-purpose classes, such as ones for spacing, color, or layout, that you add directly to HTML elements. Instead of writing your own stylesheet, you combine these classes to style a page. The README says it is lightweight (about 14kB) and designed to be responsive and mobile-first.
- Add the CDN stylesheet to an HTML page and style it with classes, with no separate CSS file
- Build a responsive grid layout using the nestable grid system described in the README
- Run the included linter to check for class name collisions with other CSS
- Use the Tachyons docs as a template for documenting your own design system
Great for
- Developers who want to prototype or build a UI quickly with plain HTML or a component framework
- Front-end developers who prefer utility classes over writing custom CSS
- Teams that want a consistent 8px spacing grid and a fixed color palette
- Designers who want to build and tweak layouts directly in the browser
Not ideal for
- Projects that already rely on a large established framework such as Bootstrap or Tailwind and do not want a second system, since class sets may overlap and conflict
- Teams that want a fully custom visual identity built from scratch, because the library's look and class naming are opinionated
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm (only needed for local setup; the CDN option requires none)
Clone the repository
git clone https://github.com/tachyons-css/tachyons.gitEnter the folder and install dependencies
cd tachyons && npm install - 2
Run it
- For the quickest start, add the CDN link from the README to the head of your HTML file: <link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
- Apply classes to your HTML elements and open the page in a browser
- Read the docs at http://tachyons.io/docs for the class reference
- 3
Get the most out of it
- Use npm start to build minified and unminified CSS while watching the src folder for changes
- Run npm run mutations to check that no class has been redefined
- Browse the component library at http://tachyons.io/components for ready-made patterns
- Try the community resources such as Tachyons TLDR for quick class lookup
Downloads
Strengths
- Small file size and designed for gzip compression, according to the README
- Works with plain HTML and several frameworks mentioned in the README
- Includes a documented class reference and community learning resources
Trade-offs
- Class-heavy HTML can become verbose and harder to read at scale
- The README does not detail browser support or long-term maintenance status, so verify these before relying on it
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| tachyons (this) | 11.7k | Library | beginner | 4 months ago | Developers who want to prototype or build a UI quickly with plain HTML or a component framework |
| tailwindcss | 98.3k | Library | intermediate | 4 days ago | Web developers who build their own interfaces and want to avoid writing large custom stylesheets |
| bootstrap | 175k | Library | beginner | 4 days ago | Developers building responsive websites or web app interfaces quickly |
| bulma | 50k | Library | beginner | 2 months ago | Developers who want a quick, consistent styling baseline for a web page |
| TW-Elements | 13.2k | Library | intermediate | 7 months ago | Developers already using Tailwind CSS who want prebuilt interactive components |
| hyperui | 12.3k | Library | beginner | 12 days ago | Developers building marketing sites with Tailwind CSS |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.