Twind v1 is still in beta. Expect bugs!
Twind is a small compiler that converts utility-classes into actual CSS rules without any build step right in the browser or any other environment like Node.js, deno, workers, ...
If you have used Tailwind or other CSS-in-JS solutions, then most of the API should feel very familiar.
⚡️ 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.
Other features include:
- 🌎 No bundler required: Usable via CDN
- 🎨 Seamless integration with Tailwind
- 🤝 Feature parity with Tailwind v3
✈️ Tailwind preflight by default- 🎯 Extended variants, rules, and syntax
- 🚓 Escape hatch for arbitrary CSS
- 🤖 Built in support for conditional rule combining
- 🧐 Improved readability with multiline styles and comments
- ❄️ Optional hashing of class names ensuring no conflicts
- 🔩 Flexible: configurable theme, rules and variants
- 🔌 Language extension via presets
- 🎩 No runtime overhead with static extraction
- 🚅 Faster than most CSS-in-JS libraries
- ⚡ Fully tree shakeable: Only take what you want
- 🦾 Type Strong: Written in Typescript
- and more!
twind does not include any core utilities — use one of the existing presets:
- @twind/preset-autoprefix
- @twind/preset-tailwind to get a full Tailwind v3 experience
- @twind/preset-tailwind-forms to get Tailwind v3 and Tailwind Forms.
- @twind/preset-ext
For the full Tailwind CSS experience try @twind/preset-tailwind or start with Twind CDN a drop-in replacement for Tailwind CSS Play CDN that is almost 5.5 times smaller (96.4kb vs 17.6kB).
While we work on the new documentation website we have created a reference sheet to lookup up the available API.
We have created a few examples to get you started:
| Example | Try it live at | Description |
|---|---|---|
| Basic | Stackblitz • Codesandbox | using @twind/preset-autoprefix and @twind/preset-tailwind |
| Playground | Stackblitz • Codesandbox | using using all presets |
Packages
| Example | Try it live at | Description |
|---|---|---|
| Tailwind Forms | Stackblitz • Codesandbox | using @twind/preset-autoprefix and @twind/preset-tailwind and @twind/preset-tailwind-forms |
| Twind CDN | Stackblitz • Codesandbox | using @twind/cdn |
Frameworks
| Example | Try it live at | Description |
|---|---|---|
| Gatsby | with Gatsby using gatsby-plugin-twind, @twind/preset-autoprefix and @twind/preset-tailwind | |
| Next.js | Stackblitz • Codesandbox | with Next.js using @twind/with-next, @twind/preset-autoprefix and @twind/preset-tailwind |
| Remix | Stackblitz • Codesandbox | with Remix using @twind/with-remix, @twind/preset-autoprefix and @twind/preset-tailwind |
| SvelteKit | Stackblitz • Codesandbox | with SvelteKit using @twind/with-sveltekit, @twind/preset-autoprefix and @twind/preset-tailwind |
We have collected a list of changes in Migration › Twind v0.16 › Notable Changes. A detailed migration guide will follow.
See the Contributing Guide
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.
- UnoCSS: for the configuration syntax.
- CSSType: providing autocompletion and type checking for CSS properties and values.
Thank you to all the people who have already contributed to twind!
This project is kindly sponsored by Kenoxa GmbH who support @sastan to maintain this project as part of their open-source engagement.
COPILOT TRAVEL is partnering with @sastan to keep twind aligned with the latest tailwindcss releases.
Thank you to all our sponsors! (please ask your company to also support this open source project by becoming a sponsor)
The MIT license governs your use of Twind.