Tachyons Neo
§ 00<br>Index — A Functional CSS Toolkit
Tachyons.
Neo.
A small, composable CSS toolkit. Sharper defaults for modern viewports, finer-grained colour steps, a small CSS Grid layer, and a handful of utilities for prototyping. No build step, no dependencies, one stylesheet.
11Patch sets
04Breakpoints
00Build steps
01Stylesheet
§ 01<br>Install
Drop the stylesheet in and go. Load it from jsDelivr, vendor it with curl, or copy the single file into your project. No build step, no dependencies.
CDN — jsDelivr
Vendor
curl -O \<br>https://raw.githubusercontent.com/gobijan/tachyons-neo/main/tachyons.css
§ 02<br>Patches
01
-m breakpoint
The -m modifier has no upper bound — styles applied at the medium breakpoint continue applying at large unless explicitly overridden. Reduces repetition.
Padding-5 applies from<br>480px and up.
02
Gap scale
Eight gap utilities for flex and grid layouts, mapped to the Tachyons spacing scale. Responsive variants available at every breakpoint.
.g0 { gap: 0 }<br>.g1 { gap: .25rem }<br>.g2 { gap: .5rem }<br>.g3 { gap: 1rem }<br>.g4 { gap: 2rem }<br>.g5 { gap: 4rem }<br>.g6 { gap: 8rem }<br>.g7 { gap: 16rem }
03
Dynamic viewport heights
Heights using the dvh unit — accounts for collapsible mobile browser chrome so 100 % really means 100 %. Responsive variants available.
.dvh-25 { height: 25dvh }<br>.dvh-50 { height: 50dvh }<br>.dvh-75 { height: 75dvh }<br>.dvh-100 { height: 100dvh }<br>.min-dvh-100 { min-height: 100dvh }
04
Hairline opacities
Extra-low opacity steps for whisper-thin overlays, dividers, and tints. Available as colour, background, and hover variants for both black and white.
.black-025 rgba(0,0,0,.025)<br>.black-0125 rgba(0,0,0,.0125)<br>.white-05 hsla(0,0%,100%,.05)<br>.white-025 hsla(0,0%,100%,.025)<br>.white-0125 hsla(0,0%,100%,.0125)
// also: .hover-* and .hover-bg-*
05
Outlined type
Renders text as an outline using -webkit-text-stroke. Combine with an inline stroke-width for thicker strokes. See the headline above. Responsive variants available.
.stroke {<br>-webkit-text-stroke: 1px currentColor;<br>-webkit-text-fill-color: transparent;
06
Grid system
A small, opinionated CSS Grid layer — equal-fraction columns and column spans. Pairs with the gap scale. Responsive variants available.
.grid display: grid
.gtc1 grid-template-columns: 1fr × 1<br>.gtc2 grid-template-columns: 1fr × 2<br>.gtc3 grid-template-columns: 1fr × 3<br>.gtc4 grid-template-columns: 1fr × 4
.csp1 grid-column: span 1<br>.csp2 grid-column: span 2<br>.csp3 grid-column: span 3<br>.csp-full grid-column: 1 / -1
07
Filters & effects
A handful of one-shot effects: a tactile press dimmer, a colour inverter, and a backdrop blur for glass surfaces.
.active-dim:active {<br>opacity: .8;<br>transition: opacity .15s ease-out;<br>.invert { filter: invert(1) }<br>.blur {<br>backdrop-filter: blur(30px);<br>-webkit-backdrop-filter: blur(30px);
08
Form & list helpers
Two small affordances. Disable the textarea resize handle, and place list markers inside the content box where they belong.
.resize-none { resize: none }<br>.list-inside { list-style-position: inside }
09
Placeholder backgrounds
Lorem-ipsum for backgrounds. Pulls a random photo from picsum.photos at three aspect ratios. For prototyping; don't ship to production.
.random-image<br>.random-image-landscape<br>.random-image-portrait
10
Writing-mode
Rotate a block of text onto a vertical axis — spine labels, edge nav, section markers. .sideways-lr reads bottom-to-top with Latin-friendly glyph orientation; .horizontal-tb resets to the default. Responsive variants available.
.horizontal-tb { writing-mode: horizontal-tb }<br>.sideways-lr { writing-mode: sideways-lr }
11
Object-fit
The counterpart to .cover/.contain. Pair with .aspect-ratio--* to crop images to a fixed ratio without distortion. Responsive variants available.
.object-cover
.object-contain
.object-cover { object-fit: cover }<br>.object-contain { object-fit: contain }
§ 03<br>Tokens
Every design value — spacing, type scale, colours, radii, shadows, durations — is exposed as a :root custom property. Reference them from your own CSS via var(--spacing-3), var(--dark-pink), var(--lh-copy).
118Tokens
18Groups
:rootCustom props
Spacing
--spacing-0 0<br>--spacing-1 .25rem<br>--spacing-2 .5rem<br>--spacing-3 1rem<br>--spacing-4 2rem<br>--spacing-5 4rem<br>--spacing-6 8rem<br>--spacing-7 16rem
Font size
--font-size-headline 6rem<br>--font-size-subheadline 5rem<br>--font-size-1 3rem<br>--font-size-2 2.25rem<br>--font-size-3 1.5rem<br>--font-size-4 1.25rem<br>--font-size-5 1rem<br>--font-size-6 .875rem<br>--font-size-7 .75rem
Measure & max-width
--measure 30em<br>--measure-wide 34em<br>--measure-narrow 20em<br>--mw-6 32rem<br>--mw-7 48rem<br>--mw-8 64rem<br>--mw-9 96rem
Line-height
--lh-solid 1<br>--lh-title 1.25<br>--lh-copy 1.5<br>--lh-headline .85
Letter-spacing
--tracked .1em<br>--tracked-tight -.05em<br>--tracked-mega .25em
Radius
--radius-0 0<br>--radius-1 .125rem<br>--radius-2 .25rem<br>--radius-3 .5rem<br>--radius-4 1rem<br>--radius-100 100%<br>--radius-pill 9999px
Border width
--border-width-0 0<br>--border-width-1...