Installation

It is possible to install and thus use Twind in a multitude of different ways. We expose various different bundles – from the latest ESM syntax to UMD bundles – with the aim of accommodating for as many dev setups as possible. This said, for the smallest size and fastest performance we recommend you use the ESM bundles.

💡 Although compatible with traditional bundlers no build step is required to use Twind.

• Importing as a local dependency
• Importing as a remote dependency

Most build tools rely on packages to be installed locally on the machine they are running on. Usually these packages are available on and installed via npm. Twind is no different in this regard.

1. Run the following command in your terminal, from your project root:

npm i twind

2. Then go ahead and import the module into your application using the bare module specifier:

import { tw } from 'twind'

Assuming you have your bundler configured correctly then you should now be able to use the module.

Given that nearly all browsers support es modules now, sometimes it is desirable to import a module straight from from a CDN such as skypack, unpkg or jspm.

1. Add the following line to a javascript file referenced by a script tag with type="module" like below:

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

Assuming you have an internet connection then you should now be able to use the module.

🚀 live and interactive demo

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

Continue to Styling with Twind