twind

Nov 18, 2022: Twind v1 is now in stable release!

Please check out the Migration Guide to upgrade and use the new @twind/core package.

---

Twind

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

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.