Nov 18, 2022: [Twind v1]( is now in stable release!

Please check out the [Migration Guide]( to upgrade and use the new [@twind/core]( package.



The smallest, fastest, most feature complete Tailwind-in-JS solution in existence

[![MIT License](]( [![Latest Release](]( [![Bundle Size](]( 'gzip bundle size (including dependencies)') [![Package Size](]( 'brotli package size (without dependencies)') [![Documentation](]( [![Github](]( [![Discord](]( [![CI](]( [![Coverage Status](](
Twind is a small compiler (~13kB) that converts Tailwind classes into actual CSS rules at runtime. If you have used Tailwind or other CSS-in-JS solutions, then most of the API should feel very familiar. ## [Documentation]( Frequently viewed docs: - [Quick Reference]( – fast overview - [Getting Started]( – how to install `twind` - [Shim]( – seamless integration with existing Tailwind HTML - [Styling with Twind]( – how to style with Twind - [Grouping]( – how to optimize rules size - [Theming]( – how to apply your theme - [CSS-in-JS]( – how to apply custom CSS - [Tailwind Extensions]( – which additional features are available ## [Features]( **⚡️ No build step** Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing. **🚀 Framework agnostic** If your app uses HTML and JavaScript, it should work with Twind. This goes for server-rendered apps too. **😎 One low fixed cost** Twind ships the compiler, not the CSS. This means unlimited styles and variants for one low fixed cost of ~13kB. Other features include: - 🎨 Seamless integration with Tailwind - 🎯 Extended variants, directives, and syntax - ✈️ Tailwind preflight by default - 🤝 Feature parity with Tailwind - 🚓 Escape hatch for arbitrary CSS - 🤖 Built in support for conditional rule combining - 🧐 Improved readability with multiline styles - ❄️ Optional hashing of class names ensuring no conflicts - 🔌 Language extension via plugins - 🎩 No runtime overhead with static extraction - 🚅 Faster than most CSS-in-JS libraries - and more! ## ⚡️ [Quick Start]( Copy and paste this code into your favorite sandbox to get started with Twind right away: ```js import { tw } from '' document.body.innerHTML = `

This is Twind!

` ``` Alternatively try the 🚀 [live and interactive demo]( and take a look at the [installation guide]( Twind is also available as an [NPM package]( ``` npm i twind ``` For seamless integration with existing Tailwind HTML you can use [twind/shim]( ```html

This is Twind!

``` Try `twind/shim` in the 🚀 [live and interactive shim demo]( This is just the beginning of all the awesome things you can do with Twind. [Check out the handbook]( to learn more. ## 💡 Inspiration It would be untrue to suggest that the design here is totally original. Other than the founders' initial attempts at implementing such a module ([oceanwind]( and [beamwind]( we are truly standing on the shoulders of giants. - [Tailwind]( created a wonderfully thought out API on which the compiler's grammar was defined. - [styled-components]( implemented and popularized the advantages of doing CSS-in-JS. - [htm]( a JSX compiler that proved there is merit in doing runtime compilation of DSLs like JSX. - [goober]( an impossibly small yet efficient CSS-in-JS implementation that defines critical module features. - [otion]( the first CSS-in-JS solution specifically oriented around handling CSS in an atomic fashion. - [clsx]( a tiny utility for constructing class name strings conditionally. - [style-vendorizer]( essential CSS prefixing helpers in less than 1KB of JavaScript. - [CSSType]( providing autocompletion and type checking for CSS properties and values. ## 🙏🏾 Sponsors Support us with a monthly donation and help us continue our activities. [[GitHub Sponsor]( | [Open Collective](] @jordwalke @tylerforesthauser @holic @Andrewnt219 ## 🤝 Contributing We are excited that you are interested in contributing to this project! We've put together a whole [contribution guide]( to get you started. ## ⚖️ License The [MIT license]( governs your use of Twind.