Mokshit06/typewind
Fork: 24 Star: 2185 (更新于 2024-04-23 06:58:01)
license: MIT
Language: TypeScript .
The safety of Typescript with the magic of Tailwind.
最后发布版本: 0.1.5 ( 2024-03-12 22:14:57)
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.
最近版本更新:(数据更新于 2024-04-25 08:42:55)
2024-03-12 22:14:57 0.1.5
2023-10-03 03:00:55 0.1.4
2023-03-13 21:04:58 0.1.3
2023-03-13 16:27:32 0.1.2
2023-03-02 03:02:20 0.1.1
2023-02-25 15:47:47 0.1.0
2023-02-20 21:51:21 0.0.20
2023-02-20 20:20:17 0.0.19
2023-02-20 19:24:14 0.0.18
2023-02-19 21:51:08 0.0.17
Mokshit06/typewind同语言 TypeScript最近更新仓库
2024-04-29 09:11:19 x-extends/vxe-table
2024-04-28 23:14:33 siyuan-note/siyuan
2024-04-28 21:03:22 lobehub/lobe-chat
2024-04-28 18:10:07 langfuse/langfuse
2024-04-28 13:38:12 vitejs/vite
2024-04-28 10:29:09 labring/FastGPT