Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

TypeTac - Tachyons in TypeScript

Build Status twitter version bundlephobia MIT License

TypeTac is a TypeScript library for Tachyons. There are many benefits of Tachyons, but the goal is to "Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible."

The benefits of TypeTac are:

  • Type Checking — no need to wonder if the class name you want is valid, typescript will throw an error if not
  • Autocomplete — use your favorite typescript editor to autocomplete definitions
  • Documentation — alongside autocomplete, get full documentation in your text editor about all tachyons class names

This comes with a tiny footprint of only 327 Bytes

import tac from 'typetac'
import React from 'react'
// you'll still need to import tachyons like normal
import 'tachyons'

// tac is an object with tachyons types
const name = tac.ma1.pa1

// but you can treat it as a string at any point in the call chain
console.log(tac) // ''
console.log(tac.ma1) // 'ma1'
console.log(tac.ma1.pa1) // 'ma1 pa1'
console.log(tac.ma1.pa1.br2) // 'ma1 pa1 br2'

// which makes Tachyons in React a breeze
const Comp = () => (
  <div className={tac.ma1.pa1.br2}>
    {/* if you want to compose other class names, it's easy */}
    <div className={`${tac.ma1.pa1} class1 class2`} />

// and easy to use without a framework
const element = document.createElement('div')
element.className = tac.ma1.pa1.br2


MIT © Ben Williams