/twind

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

Primary LanguageTypeScriptMIT LicenseMIT

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

MIT License Latest Release Bundle Size Package Size Documentation Github Discord CI Coverage Status

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.

Frequently viewed docs:

⚡️ 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!

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]

@jordwalke @tylerforesthauser @holic @Andrewnt219

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