---
hidden: true
---

TODO: add links to docs for each point

:::cols-12{.gap-4}

::col-span-4

- 🎨 Seamless integration with Tailwind
- 🤝 Feature parity with Tailwind v3
- ✈️ Tailwind preflight by default
- 🎯 Extended variants, rules, and syntax
- 🚓 Escape hatch for arbitrary CSS

::col-span-4

- 🌎 No bundler required: Usable via CDN
- 🤖 Conditional rule combining
- 🧐 Improved readability with comments
- ❄️ Optional hashing of class names
- 🔩 Flexible: configurable theme, rules and variants

::col-span-4

- 🔌 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](https://github.com/lukejacksonn/oceanwind) and [beamwind](https://github.com/kenoxa/beamwind)) we are truly standing on the shoulders of giants.

- [Tailwind](https://tailwindcss.com/): created a wonderfully thought out API on which the compiler's grammar was defined.
- [styled-components](https://styled-components.com/): implemented and popularized the advantages of doing CSS-in-JS.
- [htm](https://github.com/developit/htm): a JSX compiler that proved there is merit in doing runtime compilation of DSLs like JSX.
- [goober](https://github.com/cristianbote/goober): an impossibly small yet efficient CSS-in-JS implementation that defines critical module features.
- [otion](https://github.com/kripod/otion): the first CSS-in-JS solution specifically oriented around handling CSS in an atomic fashion.
- [clsx](https://github.com/lukeed/clsx): a tiny utility for constructing class name strings conditionally.
- [style-vendorizer](https://github.com/kripod/style-vendorizer): essential CSS prefixing helpers in less than 1KB of JavaScript.
- [UnoCSS](https://github.com/antfu/unocss): for the configuration syntax.
- [CSSType](https://github.com/frenic/csstype): providing autocompletion and type checking for CSS properties and values.

### 🤝 Contributors

Thank you to all the people who have <a href="https://github.com/tw-in-js/twind/graphs/contributors">already contributed</a> to twind!

### 🙏🏾 Sponsors

This project is kindly sponsored by <a href="https://www.kenoxa.com" target="_blank">Kenoxa GmbH</a> who support [@sastan](https://github.com/sastan) to maintain this project as part of their open-source engagement.

<a href="https://www.copilottravel.com" target="_blank">COPILOT TRAVEL</a> is partnering with [@sastan](https://github.com/sastan) to keep twind aligned with the latest Tailwind CSS releases.

Thank you to all our sponsors!

<object data="/sponsors.svg" type="image/svg+xml">
  <img src="/sponsors.png" />
</object>

Please ask your company to also support this open source project by becoming a sponsor on [Open Collective](https://opencollective.com/twind#sponsor) or [GitHub Sponsors](https://github.com/sponsors/tw-in-js).