Tachyons Neo
v2.0.1
Docs Overview

Documentation

Learn the small surface area: load the CSS, compose utilities, use container-query suffixes, and reach for app.css when product UI needs semantic tokens.

Install

Use the core stylesheet by itself for utility-first prototypes and static pages.

<link rel="stylesheet" href="/tachyons.css">

Load app.css after it when the interface needs semantic theme tokens, surfaces, text ramps, state colors, and focus helpers.

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

Pinned CDN links are best for production.

<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">

Mental Model

Tachyons Neo stays close to Tachyons: classes do one thing, compose directly in markup, and avoid component assumptions. Neo adds modern defaults where the original web has moved: container queries, dynamic viewport units, cascade layers, CSS variables, and a tiny grid layer.

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

Demos

The demo files are still plain HTML and keep their existing URLs.

Demo Platform features
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