![](\"https://raw.githubusercontent.com/mokshit06/typewind/main/.github/typewind-logo.png\"){kind=logo}
\n The safety of Typescript with the magic of Tailwind.\n
\n\n---\n\n## Introduction\n\nTypewind brings the safety, productivity and intellisense of Typescript over to Tailwind\n\n```js\nimport { tw } from 'typewind';\n\nconst styles = tw.border.hover(tw.border_black);\n```\n\n## How it works\n\nTypewind'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.\n\nThis results Typewind compiles away, leaving 0 runtime code.\n\n```js\nimport { tw } from 'typewind';\n\nconst styles = tw.border.hover(tw.border_black);\n\n// ↓ ↓ ↓ ↓ ↓ ↓\n\nconst styles = 'border hover:border-black';\n```\n\n## Features\n\n**Zero bundle size** - Typewind compiles away all the styles used, and converts them to static classes at build\n\n**Apply variants to multiple styles at once** - Since Typewind uses TS, it allows for more intuitive syntax for applying variants\n\n```js\nimport { tw } from 'typewind';\n\nconst mediaStyles = tw.sm(tw.w_4.mt_3).lg(tw.w_8.mt_6);\nconst groupInGroups = tw.text_sm.sm(tw.bg_black.hover(tw.bg_white.w_10));\n```\n\n**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.\n\n```js\nimport { tw } from 'typewind';\n\nconst styles = tw.border_blackk; // ❌ Property 'border_blackk' does not exist on type 'Typewind'. Did you mean 'border_black'?\n```\n\nThe above code would also return in a build error on running `tsc`\n\n**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.\n","readmeFilename":"README.md"}