# Tachyons — Functional CSS for Humans

> A functional CSS toolkit for designing fast-loading, readable, and maintainable interfaces. Tachyons provides single-purpose utility classes that compose directly in HTML without writing custom CSS.

## Install

Save as a script file and run:

# Tachyons — Functional CSS for Humans

## Quick Use
```html
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
  <div class="tc">
    <h1 class="f3 mb2">Hello Tachyons</h1>
    <p class="f5 fw4 gray mt0">Functional CSS in action</p>
    <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-blue" href="#">Go</a>
  </div>
</article>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-daa97548
Author: Script Depot