tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

Created
Jun 5, 2022 06:41 PM
Tags
notion imagenotion image

Twind

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
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:
  • Shim – seamless integration with existing Tailwind HTML
  • Theming – how to apply your theme

Features

notion imagenotion image
No build step
Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.
notion imagenotion image
Framework agnostic
If your app uses HTML and JavaScript, it should work with Twind. This goes for server-rendered apps too.
notion imagenotion image
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
    • notion imagenotion image
  • Extended variants, directives, and syntax
    • notion imagenotion image
  • Tailwind preflight by default
    • notion imagenotion image
  • Feature parity with Tailwind
    • notion imagenotion image
  • Escape hatch for arbitrary CSS
    • notion imagenotion image
  • Built in support for conditional rule combining
    • notion imagenotion image
  • Improved readability with multiline styles
    • notion imagenotion image
  • Optional hashing of class names ensuring no conflicts
    • notion imagenotion image
  • Language extension via plugins
    • notion imagenotion image
  • No runtime overhead with static extraction
    • notion imagenotion image
  • Faster than most CSS-in-JS libraries
    • notion imagenotion image
  • 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
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
This is just the beginning of all the awesome things you can do with Twind. Check out the handbook to learn more.

Inspiration

notion imagenotion image
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.
  • 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.
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image

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

notion imagenotion image
The MIT license governs your use of Twind.