Twind.style
The smallest, fastest, most feature complete tailwind-in-js solution in existence
- 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.