Markdown Files
Tachyons CSS
Tachyons is a functional CSS toolkit for designing in the browser. It uses composable single-purpose classes instead of writing custom CSS. All classes follow a consistent naming convention based on abbreviations.
Naming Convention
Most classes follow the pattern: {property-abbreviation}-{value-abbreviation} or {property-abbreviation}{scale-number}.
Responsive suffixes: -ns (not-small, ≥48em), -m (medium, 48em–64em), -l (large, ≥64em).
Spacing
8-step scale based on powers of two (using CSS custom properties):
| Step | Variable | Value |
|---|---|---|
| 0 | --spacing-none | 0 |
| 1 | --spacing-extra-small | .25rem |
| 2 | --spacing-small | .5rem |
| 3 | --spacing-medium | 1rem |
| 4 | --spacing-large | 2rem |
| 5 | --spacing-extra-large | 4rem |
| 6 | --spacing-extra-extra-large | 8rem |
| 7 | --spacing-extra-extra-extra-large | 16rem |
Prefix: p = padding, m = margin
Direction: a = all, h = horizontal, v = vertical, t = top, r = right, b = bottom, l = left
Examples: pa3 (padding 1rem all), mt2 (margin-top .5rem), ph4 (padding-horizontal 2rem), mv0 (margin-vertical 0)
Type Scale
| Class | Size |
|---|---|
.f-headline / .f-6 | 6rem |
.f-subheadline / .f-5 | 5rem |
.f1 | 3rem |
.f2 | 2.25rem |
.f3 | 1.5rem |
.f4 | 1.25rem |
.f5 | 1rem |
.f6 | .875rem |
.f7 | .75rem |
Typography
| Class | Property |
|---|---|
.tl / .tr / .tc / .tj | text-align: left/right/center/justify |
.fw1–.fw9 | font-weight (100–900) |
.fw-normal / .fw-bold / .fw-light | font-weight variants |
.i / .fs-normal | font-style italic/normal |
.lh-solid / .lh-title / .lh-copy | line-height presets |
.tracked / .tracked-tight / .tracked-mega | letter-spacing |
.ttc / .ttl / .ttu / .ttn | text-transform capitalize/lowercase/uppercase/none |
.strike / .underline / .no-underline | text-decoration |
.measure / .measure-wide / .measure-narrow | max-width for readable line length |
Font Families
| Class | Font Stack |
|---|---|
.sans-serif | -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif |
.serif | georgia, times, "times new roman", serif |
.system-sans-serif | -apple-system, BlinkMacSystemFont, "avenir next", avenir, sans-serif |
.system-serif | georgia, palatino, "palatino linotype", "book antiqua", serif |
.monospace | "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace |
Display
| Class | Property |
|---|---|
.dn | display: none |
.db | display: block |
.dib | display: inline-block |
.di | display: inline |
.dt / .dtc | display: table / table-cell |
.flex / .inline-flex | display: flex / inline-flex |
Flexbox
| Class | Property |
|---|---|
.flex | display: flex |
.flex-column / .flex-row | flex-direction |
.flex-wrap / .flex-nowrap | flex-wrap |
.flex-auto / .flex-none | flex: 1 1 auto / flex: none |
.items-start / .items-end / .items-center / .items-baseline / .items-stretch | align-items |
.self-start / .self-end / .self-center / .self-stretch | align-self |
.justify-start / .justify-end / .justify-center / .justify-between / .justify-around | justify-content |
.content-start / .content-end / .content-center / .content-between / .content-around / .content-stretch | align-content |
.order-0 through .order-8 / .order-last | order |
Widths
Scale: .w1 (1rem), .w2 (2rem), .w3 (4rem), .w4 (8rem), .w5 (16rem)
Percentages: .w-10 through .w-100 (10, 20, 25, 30, 33, 34, 40, 50, 60, 70, 75, 80, 90, 100)
Special: .w-third (calc(100%/3)), .w-two-thirds (calc(100%/1.5)), .w-auto
Heights
Scale: .h1 (1rem), .h2 (2rem), .h3 (4rem), .h4 (8rem), .h5 (16rem)
Percentages: .h-25, .h-50, .h-75, .h-100
Special: .h-auto
Max Widths
.mw-100 (100%), .mw1–.mw9 (1rem–16rem), .mw-none (none), .mw-custom (var)
Position & Coordinates
| Class | Property |
|---|---|
.static / .relative / .absolute / .fixed | position |
.top-0 / .top-1 / .top-2 / .top--1 / .top--2 | top |
.right-0 / .right-1 / .right-2 | right |
.bottom-0 / .bottom-1 / .bottom-2 | bottom |
.left-0 / .left-1 / .left-2 | left |
.absolute--fill | top/right/bottom/left: 0 (stretch to fill parent) |
Color Palette (Skins)
Text: .black, .near-black, .dark-gray, .mid-gray, .gray, .silver, .light-silver, .moon-gray, .light-gray, .near-white, .white
Colors: .dark-red, .red, .light-red, .orange, .gold, .yellow, .light-yellow, .purple, .light-purple, .dark-pink, .hot-pink, .pink, .light-pink, .dark-green, .green, .light-green, .navy, .dark-blue, .blue, .light-blue, .lightest-blue
Washed: .washed-blue, .washed-green, .washed-yellow, .washed-red
Opacity variants: .black-10 through .black-90 (10% increments), .white-10 through .white-90
Background: prefix with bg- (e.g., .bg-black, .bg-blue, .bg-light-gray)
Borders
| Class | Property |
|---|---|
.ba / .bt / .br / .bb / .bl / .bn | border all/top/right/bottom/left/none (solid 1px) |
.bw1–.bw5 | border-width (.125rem, .25rem, .5rem, 1rem, 2rem) |
.b--dotted / .b--dashed / .b--solid / .b--none | border-style |
.b--{color} | border-color (uses skin colors, e.g., .b--black, .b--blue) |
.br0–.br4 | border-radius (0, .125rem, .25rem, .5rem, 1rem) |
.br-100 | border-radius: 100% |
.br-pill | border-radius: 9999px |
.br--top / .br--bottom / .br--left / .br--right | zero out specific corner radii |
Box Shadow
.shadow-1 (0px 0px 4px 2px rgba(0,0,0,.2)), .shadow-2 (0px 0px 8px 2px), .shadow-3 (2px 2px 4px 2px), .shadow-4 (2px 2px 8px 0px), .shadow-5 (4px 4px 8px 0px)
Opacity
.o-0 (0), .o-03, .o-05, .o-10, .o-15, .o-20, .o-25, .o-30, .o-40, .o-50, .o-60, .o-70, .o-80, .o-90, .o-100 (1)
Hover Effects
| Class | Effect |
|---|---|
.dim | Opacity fades to 50% on hover/focus |
.glow | Opacity to 100% on hover/focus |
.hide-child / .child | Child hidden, revealed on parent hover |
.grow | Scale to 1.05 on hover |
.grow-large | Scale to 1.2 on hover |
.pointer:hover | cursor: pointer on hover |
.shadow-hover | Box-shadow appears on hover |
.underline-hover:hover | text-decoration: underline on hover |
.bg-animate | Background-color transition on hover |
Aspect Ratios
.aspect-ratio (container), .aspect-ratio--16x9, .aspect-ratio--9x16, .aspect-ratio--4x3, .aspect-ratio--3x4, .aspect-ratio--1x1, .aspect-ratio--object (inner content)
Floats & Clearfix
.fl (float left), .fr (float right), .fn (float none), .cf (clearfix)
Overflow
.overflow-visible, .overflow-hidden, .overflow-scroll, .overflow-auto, .overflow-x-visible/etc, .clip (clip content)
Measurements
Custom properties:
--spacing-*: 0, .25rem, .5rem, 1rem, 2rem, 4rem, 8rem, 16rem--width-*: 1rem through 16rem + percentages--max-width-*: xs(2rem) through 9(16rem)--height-*: 1rem through 16rem + percentages--font-size-*:_xs through headline(6rem)
Box Sizing
border-box applied to all elements by default (via .border-box).
Debugging
.debug (outline children), .debug-grid / .debug-grid-16 / .debug-grid-8 / .debug-grid-16-dots / .debug-grid-8-dots (background grid overlays)