Get started with Typewind

Setup Tailwind

Make sure you have Tailwind setup. You can follow the official Tailwind Installation docs (opens in a new tab) to get started.


Install typewind via npm

npm install typewind

Generating type definitions

typewind generate goes through your tailwind.config.js and generates type definitions and css docs based on your theme. This means that the type definitions will be custom to your configuration, and include styles for plugins etc.

npx typewind generate

These definitions need to be generated each time you install a new package via npm, or edit tailwind.config.js

It is recommended to set this as your postinstall script:-

  "scripts": {
    "postinstall": "typewind generate"

Quick Start

Setup transpiler

Typewind has support for both Babel and SWC.

Add transformer

Add the typewind transformers in your tailwind.config.js.

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