https://github.com/tw-in-js/twind
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
https://github.com/tw-in-js/twind
css css-in-js tailwind tailwind-in-js tailwindcss
Last synced: 11 days ago
JSON representation
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
- Host: GitHub
- URL: https://github.com/tw-in-js/twind
- Owner: tw-in-js
- License: mit
- Created: 2020-12-05T17:59:21.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-26T04:09:07.000Z (6 months ago)
- Last Synced: 2024-10-29T09:20:46.488Z (6 months ago)
- Topics: css, css-in-js, tailwind, tailwind-in-js, tailwindcss
- Language: JavaScript
- Homepage: https://twind.style
- Size: 43.7 MB
- Stars: 3,787
- Watchers: 16
- Forks: 101
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Roadmap: ROADMAP.md
Awesome Lists containing this project
- awesome-list - twind - in-JS solution in existence. | tw-in-js | 1463 | (TypeScript)
- awesome-tailwindcss - Twind - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time. (Tools)
README
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
---
[](https://github.com/tw-in-js/twind/blob/main/LICENSE)
[](https://www.npmjs.com/package/@twind/core)
[](https://twind.style)
[](https://github.com/tw-in-js/twind)
[](https://chat.twind.style)
[](https://github.com/tw-in-js/twind/actions/workflows/ci.yml)
[](https://coveralls.io/github/tw-in-js/twind)
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](https://twind.style)
- 🤖 Try [the playground](https://twind.run)
- 🧭 Explore [the examples](https://twind.style/examples)
- 📓 Consult [the API reference](https://twind.style/packages)
- 📜 Read [the changelog](https://github.com/tw-in-js/twind/tree/main/CHANGELOG.md)
---
**Nov 18, 2022: [Twind v1](https://github.com/tw-in-js/twind/tree/main) is now in stable release!**
Check out the [Migration Guide](https://twind.style/migration#from-twind-v016) to upgrade or go to the [v0.16 branch](https://github.com/tw-in-js/twind/tree/v0.16).
---
## ✨ 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](https://twind.style).
## 💬 Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable use [Github Discussions](https://github.com/tw-in-js/twind/discussions).
To ask questions and discuss with other Twind users in real time use [Discord Chat](https://chat.twind.style).
## 🧱 Contribute
See the [Contributing Guide](./CONTRIBUTING.md) 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](https://github.com/lukejacksonn/oceanwind) and [beamwind](https://github.com/kenoxa/beamwind)) we are truly standing on the shoulders of giants.
- [Tailwind CSS](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 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!
Please ask your company to also support this open source project by becoming a sponsor on [opencollective](https://opencollective.com/twind#sponsor) or [GitHub](https://github.com/sponsors/tw-in-js).
## ⚖️ License
The [MIT license](https://github.com/tw-in-js/twind/blob/main/LICENSE) governs your use of Twind.
