https://github.com/Mokshit06/typewind
The safety of Typescript with the magic of Tailwind.
https://github.com/Mokshit06/typewind
Last synced: 7 months 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 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-23T11:15:52.000Z (about 1 year ago)
- Last Synced: 2024-10-29T15:34:12.847Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://typewind.dev/
- Size: 14.8 MB
- Stars: 2,235
- Watchers: 6
- Forks: 23
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - typewind
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.
[](https://vercel.com?utm_source=typewind&utm_campaign=oss)