Twind

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

CSS in JSTailwindCSS
tw-in-js/twindtwind.styletwind

README

Twind

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


MIT License Latest Release Documentation Github Discord CI Coverage Status

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!

Check out the Migration Guide to upgrade or go to the v0.16 branch.


✨ 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.

Other features

- 🌎 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!


📖 Documentation


The full documentation is available at twind.style.

💬 Community


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.

🧱 Contribute


See the Contributing Guide for information on how to contribute to this project.

🌸 Credits


💡 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 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.
- 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](https://github.com/sastan) to maintain this project as part of their open-source engagement.

COPILOT TRAVEL is partnering with [@sastan](https://github.com/sastan) to keep twind aligned with the latest Tailwind CSS releases.

Thank you to all our sponsors!

Sponsors


Please ask your company to also support this open source project by becoming a sponsor on opencollective or GitHub).

⚖️ License


The MIT license governs your use of Twind.