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.