Twind Logo

Twind.style

The smallest, fastest, most feature complete tailwind-in-js solution in existence

Get started
No build step
Get all the benefits of Tailwind without the need for 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.

TODO: add links to docs for each point

  • 🎨 Seamless integration with Tailwind
  • 🤝 Feature parity with Tailwind v3
  • ✈️ Tailwind preflight by default
  • 🎯 Extended variants, rules, and syntax
  • 🚓 Escape hatch for arbitrary CSS
  • 🌎 No bundler required: Usable via CDN
  • 🤖 Conditional rule combining
  • 🧐 Improved readability with comments
  • ❄️ Optional hashing of class names
  • 🔩 Flexible: configurable theme, rules and variants
  • 🔌 Language extension via presets
  • 🎩 Zero runtime with static extraction
  • 🚅 Faster than most CSS-in-JS libraries
  • ⚡ Fully tree shakeable
  • 🦾 Type Strong: Written in Typescript
  • and 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.
  • UnoCSS: for the configuration syntax.
  • CSSType: providing autocompletion and type checking for CSS properties and values.

🤝 Contributors

Thank you to all the people who have already contributed to twind!

🙏🏾 Sponsors

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 Tailwind CSS releases.

Thank you to all our sponsors!

Please ask your company to also support this open source project by becoming a sponsor on Open Collective or GitHub Sponsors.