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
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0f34646d-f58c-46d0-a96d-b86443159812%2F26a1.png?table=block&id=a68c2779-6957-4a1c-94c4-ccb9150251d2&cache=v2)
No build step
Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7a0a81f9-708e-4107-81bf-396bde1c40d7%2F1f680.png?table=block&id=d46f38d2-4ff7-490d-909f-fda2ca7f007d&cache=v2)
Framework agnostic
If your app uses HTML and JavaScript, it should work with Twind. This goes for server-rendered apps too.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc44e2780-2a7e-4e34-9731-c17cbe87eae0%2F1f60e.png?table=block&id=163fe841-2e4b-4afb-86c4-5e4791c6ba2f&cache=v2)
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](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F52cd6609-1dc4-43ec-a673-e64225dc2e47%2F1f3a8.png?table=block&id=5ec3220e-31b0-41b2-83c3-fc7d1a9c7e6e&cache=v2)
- Extended variants, directives, and syntax
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F40ce2ed7-73a7-484f-b19e-5de7ccb12a79%2F1f3af.png?table=block&id=dc0364ce-c783-442a-849c-39de136d75c0&cache=v2)
- Tailwind preflight by default
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc691d2af-2079-4314-a3dd-182c08626dc8%2F2708.png?table=block&id=f1f10671-2dcc-42fa-ac53-f7dd29144b23&cache=v2)
- Feature parity with Tailwind
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2d48a33c-5659-4fdf-a64d-5f11d2b1134e%2F1f91d.png?table=block&id=9f9de0fd-5f15-40ff-9f84-a8e4e8730863&cache=v2)
- Escape hatch for arbitrary CSS
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff77ed42e-ebc2-41da-98e5-8edbdee611f8%2F1f693.png?table=block&id=7ee2cecd-9d40-4513-8c1e-91e34299d389&cache=v2)
- Built in support for conditional rule combining
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F123a97e3-3042-4ea9-9242-3f1f0223b7e9%2F1f916.png?table=block&id=65bfdcdc-a742-4b88-8647-59d43ca32608&cache=v2)
- Improved readability with multiline styles
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0316b39e-c227-4599-acd3-e6e3c83f2694%2F1f9d0.png?table=block&id=e8be61a9-5f91-43cb-966d-8e3f124c255b&cache=v2)
- Optional hashing of class names ensuring no conflicts
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5d2cc561-36f8-419d-998e-234bb7d0a8fd%2F2744.png?table=block&id=36ec540c-a8c1-4034-9f1c-712d49a49007&cache=v2)
- Language extension via plugins
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F90e0a7bf-4c83-4ac7-ba87-d1020303452c%2F1f50c.png?table=block&id=afc9b6e9-93d3-4f11-921b-86dc8d527fe9&cache=v2)
- No runtime overhead with static extraction
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa29c1b0b-ef9d-40ea-9b9d-cf1183c22c00%2F1f3a9.png?table=block&id=c49b84f8-ad4b-41fb-87d9-1ad82201b8da&cache=v2)
- Faster than most CSS-in-JS libraries
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Faa3e440b-d6ae-4bc6-84a2-f9c43d4ed7f9%2F1f685.png?table=block&id=3a731f87-0363-4457-b7fe-5432974ff904&cache=v2)
- 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 theThis is just the beginning of all the awesome things you can do with Twind. Check out the handbook to learn more.
Inspiration
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F132f2af4-881d-40b5-96f7-326c1df9633b%2F1f4a1.png?table=block&id=50087a1d-2977-48c5-bacf-fd572e2f8643&cache=v2)
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.
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](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F05b99e6f-7dd5-40ef-bc01-47932f8109aa%2F2696.png?table=block&id=d097d3d0-e629-4b55-ac69-253704d59884&cache=v2)
The MIT license governs your use of Twind.