Options
All
  • Public
  • Public/Protected
  • All
Menu

Getting Started

🙋 If you find any incorrect or missing documentation then please open an issue for discussion.

This is the user manual for the twind library. A small compiler that turns Tailwind short hand into CSS rules at run, build or serve time. If you have used Tailwind and/or a CSS-in-JS solution before then most of the API will feel very familiar.

We are confident that feature parity with Tailwind V2 has been achieved. We recommend you refer the Tailwind documentation site for anything non Twind implementation specific; information around directives, variants, theming etc.

📚 Tailwind Documentation

Despite being very flexible and powerful, it was our intention to keep the surface API as minimal as possible. We appreciate that Twind is likely to be used by developers & designers alike and so we try provide sensible defaults out of the box, with little to no need for customization.

Quickstart

💡 Note that examples are given in vanilla JS but the module is compatible with all popular frameworks

Getting started with the library requires no configuration, build step or even installation if you use skypack, unpkg or jspm – see the Installation guide for more information.

import { tw } from 'https://cdn.skypack.dev/twind'

document.body.innerHTML = `
  <main class="${tw`bg-black text-white`}">
    <h1 class="${tw`text-xl`}">This is Tailwind in JS!</h1>
  </main>
`

🚀 live and interactive demo

Using the exported tw function results in the compilation of the rules like bg-black text-white and text-xl exactly as specified in the Tailwind documentation. For convenience the default tailwind theme is used along with the preflight base styles if neither are provided by the developer.

twind/shim

💡 Seamless integration with existing Tailwind HTML. This feature can be used together with your favorite framework without any additional setup.

The twind/shim module allows to use the class attribute for tailwind rules. If such a rule is detected the corresponding CSS rule is created and injected into the stylesheet. No need for tw but it can be used on the same page as well (see example below).

<!DOCTYPE html>
<html lang="en" hidden>
  <head>
    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
  </head>
  <body>
    <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>
  </body>
</html>

🚀 live and interactive shim demo


Continue to Installation

Generated using TypeDoc