Tachyons

Tachyons is a functional CSS framework that provides small, single-purpose classes for building interfaces directly in HTML. It follows atomic CSS principles and uses a mobile-first responsive approach.

<!-- CDN -->
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/css/tachyons.min.css"
/>

# npm
npm install [email protected]

/* Import in CSS */
@import "tachyons";

<div class="pa4 bg-blue white">
  <h1 class="f2 fw7 mb3">Hello Tachyons</h1>
  <p class="f5 lh-copy measure">
    Rapidly build user interfaces with composable classes.
  </p>
</div>

<article class="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
  <img src="img.jpg" class="w-100 db br3 br--top" alt="Photo" />
  <div class="pa2 ph3-ns pb3-ns">
    <div class="dt w-100 mt1">
      <div class="dtc">
        <h1 class="f5 f4-ns mv0">Title</h1>
      </div>
      <div class="dtc tr">
        <h2 class="f5 mv0 gray">$24.99</h2>
      </div>
    </div>
    <p class="f6 lh-copy measure mt2 mid-gray">Description text goes here.</p>
  </div>
</article>

Powers of two progression for consistent rhythm.

Also available: .f-6 (same as .f-headline)

Optimal line length for readability.

Dark Colors: black, near-black, dark-gray, mid-gray, gray

Light Colors: silver, light-silver, moon-gray, light-gray, near-white, white

Reds: dark-red, red, light-red, washed-red

Oranges/Yellows: orange, gold, yellow, light-yellow, washed-yellow

Greens: dark-green, green, light-green, washed-green

Blues: navy, dark-blue, blue, light-blue, lightest-blue, washed-blue

Purples/Pinks: purple, light-purple, dark-pink, hot-pink, pink, light-pink

<!-- Text colors -->
<p class="blue">Blue text</p>
<p class="dark-red">Dark red text</p>

<!-- Backgrounds -->
<div class="bg-light-blue pa3">Light blue background</div>

<!-- Borders -->
<div class="ba b--green">Green border</div>

<!-- Hover states -->
<a href="#" class="blue hover-dark-blue">Hover me</a>

Same pattern for .white-* with rgba(255,255,255,*)

<!-- Card with rounded corners -->
<div class="ba br3 b--black-10 pa3">Rounded card</div>

<!-- Pill button -->
<button class="br-pill ba b--blue bg-blue white ph4 pv2">Click me</button>

<!-- Circle avatar -->
<img src="avatar.jpg" class="br-100 w3 h3" alt="Avatar" />

Fills parent with absolute positioning.

Note: -m is for medium screens only (not including large).

<!-- Full width on mobile, 50% on tablet+ -->
<div class="w-100 w-50-ns">...</div>

<!-- Hidden on mobile, block on tablet+ -->
<div class="dn db-ns">...</div>

<!-- Different padding at different sizes -->
<div class="pa2 pa3-ns pa4-l">...</div>

<!-- Responsive font sizes -->
<h1 class="f3 f2-m f1-l">Responsive heading</h1>

<!-- Stack on mobile, flex row on tablet+ -->
<div class="flex-column flex-row-ns">
  <div class="w-100 w-50-ns">Column 1</div>
  <div class="w-100 w-50-ns">Column 2</div>
</div>

/* Not Small (ns) */
@media screen and (min-width: 30em) {
}

/* Medium (m) */
@media screen and (min-width: 30em) and (max-width: 60em) {
}

/* Large (l) */
@media screen and (min-width: 60em) {
}

Classes apply from their breakpoint up:

• .dn-ns = hidden at 480px and above
• .db-l = block at 960px and above
• No suffix = applies to all sizes

<div class="cf">
  <img src="image.jpg" class="fl w-25 mr3" alt="Float left" />
  <p>Text wraps around floated image...</p>
</div>

All hover effects include smooth transitions.

Use with .dtc (display: table-cell):

<div class="dt w-100">
  <div class="dtc v-mid">Vertically centered content</div>
</div>

<div class="pa4 shadow-2 br3">Card with medium shadow</div>

<button class="pa3 shadow-1 hover-shadow-3">Lift on hover</button>

Removes default padding and list-style.

<ul class="list pl0">
  <li class="pv2 bb b--black-10">Item 1</li>
  <li class="pv2 bb b--black-10">Item 2</li>
  <li class="pv2">Item 3</li>
</ul>

<!-- Text input -->
<input
  type="text"
  class="input-reset ba b--black-20 pa2 mb2 db w-100"
  placeholder="Enter text"
/>

<!-- Focus state -->
<input type="text" class="input-reset ba b--black-20 pa2 focus-black-40" />

<!-- Button -->
<button class="b ph3 pv2 input-reset ba b--black bg-transparent pointer f6 dib">
  Submit
</button>

Resets appearance, border, padding, and background.

<div class="aspect-ratio aspect-ratio--16x9">
  <iframe src="video.mp4" class="aspect-ratio--object"> </iframe>
</div>

<div class="aspect-ratio aspect-ratio--1x1">
  <div class="aspect-ratio--object cover" style="background:url(img.jpg)"></div>
</div>

<!-- Responsive image -->
<img src="photo.jpg" class="w-100 db" alt="Photo" />

<!-- Background image -->
<div class="vh-100 cover bg-center" style="background-image: url(bg.jpg)"></div>

<!-- Horizontal center -->
<div class="absolute left-0 right-0 center">Horizontally centered</div>

<!-- Vertical and horizontal center -->
<div class="absolute absolute--fill flex items-center justify-center">
  Perfectly centered
</div>

<!-- Top-left -->
<div class="absolute top-0 left-0">Top-left</div>

<!-- Top-right -->
<div class="absolute top-0 right-0">Top-right</div>

<!-- Bottom-right -->
<div class="absolute bottom-0 right-0">Bottom-right</div>

<!-- Bottom-left -->
<div class="absolute bottom-0 left-0">Bottom-left</div>

<div class="debug">
  <div class="pa2">Box 1</div>
  <div class="pa2">Box 2</div>
</div>

Add to any element to visualize layout.

<div class="mw7 center ph3">
  <h1>Centered content</h1>
</div>

<div class="flex flex-wrap">
  <div class="w-100 w-50-m w-33-l pa2">
    <div class="bg-light-gray pa3">Column 1</div>
  </div>
  <div class="w-100 w-50-m w-33-l pa2">
    <div class="bg-light-gray pa3">Column 2</div>
  </div>
  <div class="w-100 w-50-m w-33-l pa2">
    <div class="bg-light-gray pa3">Column 3</div>
  </div>
</div>

<header class="vh-100 bg-dark-gray white flex items-center justify-center">
  <div class="tc">
    <h1 class="f1 f-subheadline-l fw7 mb0">Hero Title</h1>
    <p class="f3 fw4 mt3 mb4">Subtitle goes here</p>
    <a href="#" class="f6 link dim br-pill ph4 pv3 mb2 dib white bg-blue">
      Call to Action
    </a>
  </div>
</header>

<!-- Primary button -->
<a class="f6 link dim br-pill ph4 pv3 dib white bg-blue" href="#"> Primary </a>

<!-- Secondary button -->
<a class="f6 link dim br-pill ba ph4 pv3 dib blue" href="#"> Secondary </a>

<!-- Ghost button -->
<a class="f6 link dim br-pill ba bw1 ph4 pv3 dib black" href="#"> Ghost </a>

<nav class="dt w-100 border-box pa3 ph5-l">
  <a class="dtc v-mid mid-gray link dim w-25" href="/" title="Home">
    <img src="logo.svg" class="dib w2 h2 br-100" alt="Site Logo" />
  </a>
  <div class="dtc v-mid w-75 tr">
    <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="About"
      >About</a
    >
    <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Work"
      >Work</a
    >
    <a class="link dim dark-gray f6 f5-l dib" href="#" title="Contact"
      >Contact</a
    >
  </div>
</nav>

<footer class="pv4 ph3 ph5-ns tc">
  <a
    class="link near-black hover-silver dib h2 w2 mr3"
    href="#"
    title="Facebook"
  >
    <svg>...</svg>
  </a>
  <a
    class="link near-black hover-silver dib h2 w2 mr3"
    href="#"
    title="Twitter"
  >
    <svg>...</svg>
  </a>
  <p class="f6 db b ttu lh-solid">Company Name</p>
  <p class="f6 gray mt2 mb3">© 2026 Company. All Rights Reserved</p>
</footer>

⚠️ Not linear pixels - Uses powers of two:

• .pa1 = 4px (not 1px)
• .pa2 = 8px (not 2px)
• .pa3 = 16px (not 3px)

⚠️ .f7 is tiny (12px) - Use with extreme caution. Not recommended for body text.

⚠️ Headlines too large for mobile - Always use responsive variants:

<h1 class="f2 f-subheadline-l">Title</h1>

⚠️ Mobile-first, min-width - .dn-ns means hidden at 480px and above, not below.

⚠️ -m is range, not threshold - Medium classes only apply between 480px–960px, not 480px+.

⚠️ Inherit text color - Borders use currentColor by default. Set explicitly:

<div class="ba b--black-10">Explicit border color</div>

⚠️ .flex-auto includes min-width: 0 - This is a workaround for Chrome's flexbox overflow bug with long content.

⚠️ .w-third uses calc() - Not supported in Opera Mini or IE8. Use .w-33 for better compatibility.

⚠️ Shadows can impact performance - Avoid animating .shadow-* classes. Animate transform and opacity instead.