https://github.com/mokshit06/typewind

The safety of Typescript with the magic of Tailwind.
https://github.com/mokshit06/typewind

Last synced: about 1 month ago
JSON representation

The safety of Typescript with the magic of Tailwind.

• Host: GitHub
• URL: https://github.com/mokshit06/typewind
• Owner: Mokshit06
• License: mit
• Created: 2023-01-17T15:38:59.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-12T14:14:44.000Z (8 months ago)
• Last Synced: 2024-04-28T05:01:11.443Z (7 months ago)
• Language: TypeScript
• Homepage: https://typewind.dev/
• Size: 14.4 MB
• Stars: 2,182
• Watchers: 5
• Forks: 24
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  The safety of Typescript with the magic of Tailwind.



---

## Introduction

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

```js

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.

```js

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

```js

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.

```js

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](https://raw.githubusercontent.com/mokshit06/typewind/main/.github/powered-by-vercel.svg)](https://vercel.com?utm_source=typewind&utm_campaign=oss)