# Getting Started

# ES Module (CDN)

Twind is available as an ES Module on skypack. Be sure to check browsers support if your users may not be using modern browsers.

<script type="module">
  import { tw } from 'https://cdn.skypack.dev/twind'
</script>

If you would like to get started with Twind right away, you can copy/paste this code into your favorite sandbox (CodeSandbox, CodePen, etc.):

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>
`

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 unless you explicitly overwrite them.

For seamless integration with existing Tailwind HTML, you can use the 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>

📚 For more detailed instruction on usage please read the documentation and check out this extended demo

Twind is designed to be used in almost any environment and exposes several different bundles from ESM to UMD. The ESM bundles should be preferred for it's smaller size and faster performance.

# Local Module (NPM)

Twind is available as an NPM module.

npm i twind

# Supporting legacy browsers

A UMD build is available for legacy browsers.

<script src="https://unpkg.com/twind/twind.umd.js"></script>
<script>
  var tw = twind.tw
</script>

The library will currently run in all browsers that support Math.imul, Map, Set and WeakMap (eg Chrome >=36, Edge >=12, Firefox >=20, Opera >=25, Safari >=8, iOS >=8). Additionally all LTS versions of Node.js are supported.

Some new tailwind features use CSS Variables (Custom Properties) which are not available in legacy browsers (Chrome <49, IE, Edge <16, Firefox <31, Opera <36, Safari <9.1, iOS <9.3). For IE 11 you can try the CSS Variables Polyfill.

We included fallbacks for the following directives which mimic Tailwind v1 behavior:

• Color Opacity

  • border-opacity-*
  • bg-opacity-*
  • text-opacity-*
  • placeholder-opacity-*

• Reversing Children Order

  • divide-*-reverse
  • space-*-reverse

• rotate, scale , skew and translate can only be used alone

  rotate-45 works but when using rotate-45 scale-150 only one of both is applied. In that case you must use transform: transform rotate-45 scale-150

Some directive only work with CSS Variables and are not supported in legacy browsers:

• Ring

# Supporting IE11 and obsolete platforms

This library uses features like destructuring assignment and const/let declarations and doesn't ship with ES5 transpiled sources. If you aim to support browsers like IE11 and below → make sure you configure your transpiler/bundler to include your node_modules.

Additionally you need to provide a polyfill for Math.imul. IE 11 already supports Map, Set and WeakMap - no polyfills needed for these.