The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
Twind is a small compiler that converts utility classes into CSS at runtime. The goal of this project is to unify the flexibility of CSS-in-JS with the carefully considered constraints of the Tailwind API.
Utility-first CSS without any build step right in the browser or any other environment like Node.js, deno, workers, ...
- 📖 Study the documentation
- 🤖 Try the playground
- 🧭 Explore the examples
- 📓 Consult the API reference
- 📜 Read the changelog
Nov 18, 2022: Twind v1 is now in stable release!
⚡️ No build step
Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.
🚀 Framework agnostic
😎 One low fixed cost
Twind ships the compiler, not the CSS. This means unlimited styles and variants for one low fixed cost.
- 🌎 No bundler required: Usable via CDN
- 🎨 Seamless integration with Tailwind
- 🤝 Feature parity with Tailwind v3
- 🎯 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!
The full documentation is available at twind.style.
For help, discussion about best practices, or any other conversation that would benefit from being searchable use Github Discussions.
To ask questions and discuss with other Twind users in real time use Discord Chat.
See the Contributing Guide for information on how to contribute to this project.
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 CSS: 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.
- 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!
Thank you to all our sponsors!
The MIT license governs your use of Twind.