typewind

The safety of Typescript with the magic of Tailwind.
GitHub
2.23k
Created 2 years ago, last commit 14 days ago
7 contributors
172 commits
Stars added on GitHub, month by month
0
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Last 12 months
+0.3
/day
Package on NPM
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
README

The safety of Typescript with the magic of Tailwind.


Introduction

Typewind brings the safety, productivity and intellisense of Typescript over to Tailwind

import { tw } from 'typewind';

const styles = tw.border.hover(tw.border_black);

How it works

Typewind's compiler is a babel plugin that runs over your code, statically analyses it and converts all the tw styles into their corresponding Tailwind classes.

This results Typewind compiles away, leaving 0 runtime code.

import { tw } from 'typewind';

const styles = tw.border.hover(tw.border_black);

// ↓ ↓ ↓ ↓ ↓ ↓

const styles = 'border hover:border-black';

Features

Zero bundle size - Typewind compiles away all the styles used, and converts them to static classes at build

Apply variants to multiple styles at once - Since Typewind uses TS, it allows for more intuitive syntax for applying variants

import { tw } from 'typewind';

const mediaStyles = tw.sm(tw.w_4.mt_3).lg(tw.w_8.mt_6);
const groupInGroups = tw.text_sm.sm(tw.bg_black.hover(tw.bg_white.w_10));

Type safety and intellisense - Using the TS compiler, Typewind is able to provide type safety to tailwind, and provide intellisense & autocomplete for all the classes from tailwind config.

import { tw } from 'typewind';

const styles = tw.border_blackk; // ❌ Property 'border_blackk' does not exist on type 'Typewind'. Did you mean 'border_black'?

The above code would also return in a build error on running tsc

Types generated from config - Type definitions of tw are generated directly from your tailwind config, so it is always custom to you, and also creates types for custom theme palette and plugins.

Powered by Vercel