Tachyons — Functional CSS for Humans

Introduction

Tachyons is one of the original functional (utility-first) CSS frameworks. Instead of semantic class names that map to components, Tachyons provides small, composable classes like f3 (font-size), pa3 (padding), and bg-white (background color) that you combine directly in markup.

What Tachyons Does

• Provides hundreds of single-purpose utility classes for spacing, typography, color, and layout
• Includes a responsive suffix system (-ns, -m, -l) for breakpoint-specific styling
• Ships a curated type scale, spacing scale, and color palette
• Supports both CDN usage and PostCSS-based custom builds
• Covers flexbox, grid, floats, widths, heights, borders, and opacity

Architecture Overview

Tachyons is organized into standalone CSS modules, each covering one design concern (spacing, typography, color, etc.). Classes follow a terse naming convention: property abbreviation plus scale step. The responsive system appends breakpoint suffixes so any class can be scoped to a viewport range. No preprocessor is required for basic usage.

Self-Hosting & Configuration

• Install via npm: npm install tachyons
• Import in your CSS or HTML via a CDN link
• Customize the scales and colors by editing the PostCSS source modules
• Generate a custom build with npm run build after modifying variables
• Integrate with any bundler (webpack, Vite, Parcel) as a plain CSS import

Key Features

• Predictable single-purpose classes eliminate specificity conflicts
• Responsive suffixes let you adjust any property per breakpoint
• Minimal file size (approximately 14 KB gzipped for the full build)
• No JavaScript dependencies; works with any stack
• Well-documented with a component gallery showing real layout patterns

Comparison with Similar Tools

• Tailwind CSS — more extensive utility set with JIT compilation; Tachyons predates it and requires no build step
• Bootstrap — component-centric with JS; Tachyons is utility-only CSS
• UnoCSS — on-demand atomic engine; Tachyons is a static CSS file
• Pure CSS — small framework with grid and forms; Tachyons is purely utility classes
• Basscss — similar functional approach but smaller community and less maintained

FAQ

Q: How is Tachyons different from Tailwind CSS? A: Tachyons pioneered the utility-first approach before Tailwind. It uses a fixed set of classes in a static CSS file, while Tailwind generates classes on demand via a build tool.

Q: Is Tachyons still maintained? A: The core library is stable. Updates are infrequent because the design is intentionally minimal and complete.

Q: Can I customize the color palette? A: Yes. Fork the source or use the PostCSS modules to override the default color scale before building.

Q: Does Tachyons support dark mode? A: There is no built-in dark mode toggle. You can layer dark-mode classes by extending the source or combining with a small custom stylesheet.

Sources

• https://github.com/tachyons-css/tachyons
• https://tachyons.io/