Tachyons Neo
v2.0.1
§ 00 Index - A Functional CSS Toolkit

Tachyons
Neo

A small, composable CSS toolkit. Sharper defaults for modern viewports, CSS variable design tokens, a small CSS Grid layer, and a handful of utilities for prototyping. No build step, no dependencies, one core stylesheet; add app.css for semantic application tokens.

§ 01 Install

Drop the core stylesheet in and go. Page-level responsive utilities work by default. Load it from jsDelivr, vendor it with curl, or copy the file into your project. Add app.css after it when product UI needs semantic light/dark tokens.

CDN - pinned

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v2.0.1/tachyons.css">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v2.0.1/app.css">

Local files

<link rel="stylesheet" href="/tachyons.css">
<link rel="stylesheet" href="/app.css">
§ 02 Principles

Composable

Build interface pieces from small utilities instead of waiting for a component abstraction.

Readable

Use a stable type scale, measures, and high-contrast color combinations by default.

Responsive

Keep the familiar suffixes, but move them onto container queries for modern layouts.

Layered

Use cascade layers so reset, utilities, app helpers, debug helpers, and project CSS compose predictably.

§ 03 Reference Modules

Spacing

Padding, margin, negative margin, and gap utilities mapped to the same powers-of-two scale.

pa*, ph*, pv*, ma*, mh*, mv*, na*, g*

Layout and Grid

Display, flexbox, shrink-safe grid tracks, spans, widths, heights, and overflow helpers.

flex, grid, gtc*, csp*, w-*, h-*, min-w-0

Typography

Type scale, families, measures, leading, tracking, transforms, and display-outline helpers.

f*, lh-*, measure*, tracked*, stroke, tnum

Color

Original Tachyons palette plus finer black and white alpha steps for hairline UI.

black-*, white-*, bg-*, b--*, hover-*

Tokens

CSS custom properties for spacing, type, radii, shadow, duration, and color values.

--spacing-*, --font-size-*, --radius-*, --shadow-*

Responsive

Container-query responsive suffixes with page-level defaults and component-local roots.

-ns, -m, -l, root

App CSS

Optional semantic product UI tokens for themes, surfaces, text, borders, focus, and states.

bg-surface-*, text-*, accent, focus-ring
§ 04 Neo Patches
01

-m query step

Container-query based and no upper bound: -m styles continue at large unless overridden.

<div class="pa3 pa5-m">Padding grows from 30em and up.</div>
02

Gap scale

.g0 through .g7 for flex and grid, mapped to the spacing scale.

<div class="flex g3">...</div>
03

Dynamic viewport heights

.dvh-25, .dvh-50, .dvh-75, .dvh-100, and .min-dvh-100 use the dvh unit.

<main class="min-dvh-100">...</main>
04

Hairline opacities

Extra-low black and white alpha steps for dividers, overlays, and subtle surfaces.

<div class="bt b--black-025">...</div>
05

Outlined type

.stroke renders display text as an outline using -webkit-text-stroke.

<span class="stroke yellow">Neo</span>
06

Grid system

Small CSS Grid layer with grid display, equal tracks, lanes, and column spans.

<div class="grid gtc3 g3"><div class="csp2">...</div></div>
07

Filters and effects

.active-dim, .invert, and .blur add compact interaction and backdrop effects.

<button class="active-dim">Save</button>
08

Form and list helpers

.resize-none and .list-inside cover common form and prose edge cases.

<textarea class="resize-none"></textarea>
09

Placeholder backgrounds

.random-image variants provide fast image placeholders during prototyping.

<div class="random-image-landscape"></div>
10

Writing mode

.sideways-lr and .horizontal-tb support vertical spine labels and resets.

<span class="sideways-lr">Label</span>
11

Object fit

.object-cover and .object-contain give images the media counterpart to cover and contain.

<img class="object-cover aspect-ratio--4x5" src="..." alt="">
12

Cascade layers

Ships as @layer reset, tachyons, app, debug so project CSS can override utilities cleanly.

@layer reset, tachyons, app, debug;
13

Min-width and min-height zero

.min-w-0 and .min-h-0 let flex and grid children shrink below content width.

<div class="min-w-0 truncate">long-url...</div>
14

Container queries

Responsive variants query the page by default; .root makes behavior component-local.

<article class="root"><div class="pa3 pa5-l">...</div></article>
§ 05 Tokens

Every design value - spacing, type scale, measures, radii, shadows, durations, and colors - is available as a custom property. The utilities and your custom CSS can speak the same language. 

.card {
  padding: var(--spacing-3);
  color: var(--dark-pink);
  line-height: var(--lh-copy);
}
§ 06 Application CSS

The optional app layer adds semantic tokens for product UI: surfaces, text, borders, accent, state colors, focus rings, and scoped light/dark themes.

§ 07 Demos

Dropdown

Popover API, CSS Anchor Positioning, fade-y, allow-discrete

Modal Dialog

dialog, showModal(), backdrop, form method=dialog

Flash

Toast pattern, keyframes, inline dismiss

Buttons

Default, primary, small, large, and icon-only button links

Card

Placeholder image, clipped radius, elevation, and stacked content

App Shell

app.css semantic tokens, scoped themes, focus helpers

Form Fields

Rails-friendly labels, hints, errors, native controls

Inputs

Native input showcase with Neo grid

Tooltip

hide-child, focus-within, visibility transition
§ 08 Changelog
v2.0.1
2026-06-14
  • Move grid helpers into utility order.
  • Move grid display utilities into display group.
  • Add grid-lanes display utility.
  • Use sizing var in form example.
v2.0.0
2026-06-08
  • Responsive -ns, -m, and -l variants now use container queries.
  • Make html an inline-size query container for page-level responsive behavior.
  • Add .root as the component query root for local responsive behavior.
  • Add optional app.css with semantic application tokens and scoped theming.
  • Reserve @layer app between core utilities and debug helpers.
v1.1.2
2026-06-01
  • Add object-cover and object-contain with responsive variants.
  • Make gtc1 through gtc4 tracks shrink-safe with minmax(0, 1fr).
v1.1.1
2026-05-29
  • Add min-w-0 and min-h-0 utilities with responsive variants.
v1.1.0
2026-05-29
  • Wrap tachyons.css in cascade layers.
  • Drop stray !important from cover, contain, and clip.
§ 09 Colophon

A Screen Island edition of Tachyons. Set in the system Helvetica stack at the body, with system mono for code. Descended from Tachyons under the long shadow of Muller-Brockmann, Hofmann, and Crouwel. Built for internal use at Screen Island; published in case it is useful to you.

Source
github.com/gobijan/tachyons-neo
Upstream
tachyons.io - v4.13.0
License
MIT