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

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.