Twind is a small compiler (~13kB) that converts Tailwind classes into actual CSS rules at runtime. If you have used Tailwind or other CSS-in-JS solutions, then most of the API should feel very familiar.
Documentation
Frequently viewed docs:
- Quick Reference – fast overview
- Getting Started – how to install
twind
- Shim – seamless integration with existing Tailwind HTML
- Styling with Twind – how to style with Twind
- Grouping – how to optimize rules size
- Theming – how to apply your theme
- CSS-in-JS – how to apply custom CSS
- Tailwind Extensions – which additional features are available
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 of ~13kB.
Other features include:
- 🎨 Seamless integration with Tailwind
- 🎯 Extended variants, directives, and syntax
✈️ Tailwind preflight by default- 🤝 Feature parity with Tailwind
- 🚓 Escape hatch for arbitrary CSS
- 🤖 Built in support for conditional rule combining
- 🧐 Improved readability with multiline styles
- ❄️ Optional hashing of class names ensuring no conflicts
- 🔌 Language extension via plugins
- 🎩 No runtime overhead with static extraction
- 🚅 Faster than most CSS-in-JS libraries
- and more!
Quick Start
⚡️Copy and paste this code into your favorite sandbox to get started with Twind right away:
import { tw } from 'https://cdn.skypack.dev/twind'
document.body.innerHTML = `
<main class="${tw`h-screen bg-purple-400 flex items-center justify-center`}">
<h1 class="${tw`font-bold text(center 5xl white sm:gray-800 md:pink-700)`}">This is Twind!</h1>
</main>
`
Alternatively try the 🚀 live and interactive demo and take a look at the installation guide.
Twind is also available as an NPM package:
npm i twind
For seamless integration with existing Tailwind HTML you can use twind/shim:
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
<main class="h-screen bg-purple-400 flex items-center justify-center">
<h1 class="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
</main>
Try twind/shim
in the 🚀 live and interactive shim demo
This is just the beginning of all the awesome things you can do with Twind. Check out the handbook to learn 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.
- CSSType: providing autocompletion and type checking for CSS properties and values.
🙏🏾 Sponsors
Support us with a monthly donation and help us continue our activities.
[GitHub Sponsor | Open Collective]
🤝 Contributing
We are excited that you are interested in contributing to this project! We've put together a whole contribution guide to get you started.
⚖️ License
The MIT license governs your use of Twind.