typewind

The safety of Typescript with the magic of Tailwind.

TailwindCSSClassName
Mokshit06/typewindtypewind.dev/typewind

README


The safety of Typescript with the magic of Tailwind.


Introduction


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

  1. ```js
  2. import { tw } from 'typewind';

  4. const styles = tw.border.hover(tw.border_black);
  5. ```

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.

  1. ```js
  2. import { tw } from 'typewind';

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

  6. // ↓ ↓ ↓ ↓ ↓ ↓

  8. const styles = 'border hover:border-black';
  9. ```

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

  1. ```js
  2. import { tw } from 'typewind';

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

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.

  1. ```js
  2. import { tw } from 'typewind';

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

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