typestyle/typestyle

---

typestyle/typestyle.json

{
  "createdAt": "2016-10-13T23:50:52Z",
  "defaultBranch": "master",
  "description": "Making CSS Typesafe 🌹",
  "fullName": "typestyle/typestyle",
  "homepage": "https://typestyle.github.io",
  "language": "TypeScript",
  "name": "typestyle",
  "pushedAt": "2023-06-24T04:03:06Z",
  "stargazersCount": 3066,
  "topics": [
    "css",
    "css-in-js",
    "typescript",
    "typestyle"
  ],
  "updatedAt": "2025-11-10T05:47:28Z",
  "url": "https://github.com/typestyle/typestyle"
}

TypeStyle

Making CSS type safe.

Writing CSS with TypeStyle will be just as fluent as writing JavaScript with TypeScript.

There are quite a few css in js frameworks out there. This one is different:

• Provides great TypeScript developer experience.
• No custom AST transform or module loader support needed.
• Works with any framework (react, angular2, cyclejs, whatever, doesn’t matter).
• Zero config. Just use.
• super small

This project is powered by github 🌟s ^ go ahead and star it please.

Checkout the awesome list of reviews 🌹.

Overview

• [Quickstart]!(#quickstart)
• [Guide: Pseudo Classes, Animations, Media Queries, Server side rendering]!(#guide)
• Why!(#why)

Quickstart

Use it like you would use CSS modules or CSS in general with webpack etc, but this time you get to use TypeScript / JavaScript!

Install npm install typestyle --save

Use

/** Import */
import {style} from "typestyle";

/** convert a style object to a CSS class name */
const className = style({color: 'red'});

/** Use the class name in a framework of choice */
//  e.g. React
const MyButton =
  ({onClick,children})
    => <button className={className} onClick={onClick}>
        {children}
      </button>
// or Angular2
@Component({
  selector: 'my-component',
  template: `<div class="${className}">Tada</div>`
})
export class MyComponent {}

Guide

We really really want to make CSS maintainable and simple. So we even wrote a free and open source book, covering the super simple core API, a handful of utility styles in csx and tons of other goodness 🌹. Jump to the guide

Video Course

The guide contains everything you need to know. But if you prefer to watch video we have a free course up on egghead.

Why

You are probably here cause you are unhappy with your current workflow. So why not just jump to the guide and give it a go. If you still need reasons we have quite a few.