DEV Community

Kavin Desi Valli
Kavin Desi Valli

Posted on • Originally published at on

Typewind: The magic of Tailwind combined with the safety of Typescript

Well, the people who've read my previous articles know how much I love type-safety, hence someone who loves the t3 stack. Here's Typewind, a typesafe and zero-runtime version of Tailwind CSS, a utility-first CSS framework that can be composed to build any design, directly in your markup.


The whole thing started with one tweet.

Then Colin McDonnell tweeted on what tailwind with type safety and proper autocompletion would look like.

Mokshit, the creator of Typewind, sent me this tweet and both of us, at first look were having confused thoughts but the more and more we saw it, the more and more we started getting convinced of it. Looks like Theo had similar thoughts.

We discussed it for some time and he decided to start working on it. Overnight, he was done with the transpilation part and I was just hovering along with him, looking at the things which were being done understanding only 70% of the things happening.

I started working on the docs and working a little on the tailwind transformers started getting me interested in build tools (probably something I want to give a try in the future).

Fast forward to just a few days later, he was done building the package and I was done setting up the docs and the examples and decided to release. However, we had one issue. We couldn't think of a logo. After playing around for hours with different combinations, I thought of a wavy line under wind but said it looked bad and discarded it. Turns out only the font and the structure of the wavy line was bad cause the final version turned out way better.

Typewind Logo

He released it overnight and it got a lot more response than we had expected! So here's about Typewind, and how you can get started with it:


  • Zero runtime

  • Type-safety and auto-completion

  • CSS docs based on your config

  • Apply variants to multiple styles at once

  • No need for additional editor extensions

  • Catches errors at compile time

Typewind, generated type definitions on Tailwind classes custom to your app's tailwind.config.js after running the npx typewind generate command.

Typewind has currently been tested to work with Vite (React) and Next.JS and you can find them in the examples.

Getting Started

The installation page in the docs is a very good place to start with Typewind.


Install via your favourite package manager (npm/yarn/pnpm).

npm install typewind

Enter fullscreen mode Exit fullscreen mode

Generate Type Definitions

npx typewind generate

Enter fullscreen mode Exit fullscreen mode

This will go through your tailwind.config.js and generate types and css docs custom to your app.

Setup with Next.JS

After setting up Tailwind, make the following changes:

  1. Add a .babelrc with the following contents:
  "presets": ["next/babel"],
  "plugins": ["typewind/babel"]

Enter fullscreen mode Exit fullscreen mode
  1. Add transformer to your Tailwind Config
const { typewindTransforms } = require('typewind/transform');

/** @type {import('tailwindcss').Config} \*/
module.exports = {
  content: {
    files: ['./src/**/*.{js,jsx,ts,tsx}'],
    transform: typewindTransforms,

Enter fullscreen mode Exit fullscreen mode

And you're good to go! Just run npm run dev next time and you should be able to use Typewind inside your app.

Setup with Vite

Make the same change in the tailwind.config.js file as mentioned in the NextJS example, but the babel change has to be done in the vite.config.js like so:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react({ babel: { plugins: ['typewind/babel'] } })],

Enter fullscreen mode Exit fullscreen mode

And, you'll be done setting up Typewind in your Vite application.


There are a few usage cases, just like in Tailwind and all of them can be found in detail in the documentation, and it would be redundant to write them again in this article. But here's just a trailer to show you what it's capable of:

import { tw } from 'typewind';

export default function App() {
  return (
      <h1 className={}>
        Hello World

Enter fullscreen mode Exit fullscreen mode


Hope this gets you interested in getting started with Typewind, and gets you to use it in your next project!

Top comments (0)