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">
These CDN links match this documentation. For production, vendor both files together or pin both to the same published tag or full commit SHA.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v3.0.0/tachyons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v3.0.0/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.
Browser Support
Core layout requires CSS cascade layers, inline-size container queries, and dynamic viewport units. The optional app layer also requires light-dark() and color-mix(). Check the browsers your product supports against those features.
grid-lanes is experimental and falls back to regular grid. Automatic contrast-color() foregrounds have explicit defaults for older browsers; custom themes must provide matching foreground overrides when that function is unavailable. See App CSS.
The popover demos additionally use the Popover API and CSS anchor positioning. Modal demos use native dialog. These examples target browsers with those platform features.
Reduced Motion
When prefers-reduced-motion: reduce is active, Neo sets its three duration tokens to 0s, removes interaction scaling, and opens popovers without entrance motion. Token-based animations in the demos follow the same preference. Project CSS that overrides durations or adds animations should also respect it.
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 |