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 image

Twind

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
notion image
notion image
notion image
notion image
notion image
notion image
notion image
notion image
notion 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 image
No build step
Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.
notion image
Framework agnostic
If your app uses HTML and JavaScript, it should work with Twind. This goes for server-rendered apps too.
notion 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 image
  • Extended variants, directives, and syntax
    • notion image
  • Tailwind preflight by default
    • notion image
  • Feature parity with Tailwind
    • notion image
  • Escape hatch for arbitrary CSS
    • notion image
  • Built in support for conditional rule combining
    • notion image
  • Improved readability with multiline styles
    • notion image
  • Optional hashing of class names ensuring no conflicts
    • notion image
  • Language extension via plugins
    • notion image
  • No runtime overhead with static extraction
    • notion image
  • Faster than most CSS-in-JS libraries
    • notion 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 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 image
notion image
notion image
notion image
notion image
notion image
notion image
notion image
notion 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 image
The MIT license governs your use of Twind.