Getting Started

Installation

Twind is a small compiler that converts utility classes into CSS at runtime. The goal of this project is to unify the flexibility of CSS-in-JS with the carefully considered constraints of the Tailwind CSS API.

Utility-first CSS without any build step right in the browser or any other environment like Node.js, deno, workers, ...

If you have used Tailwind CSS or other CSS-in-JS solutions, then most of the API should feel very familiar.

Important

The @twind/core package does not include any rules or variants. You need to install an existing preset or bring your own preset to get started.

Local / Bundler

Tip

Twind provides several integrations for different frameworks and environments.

Install twind
Twind is available on npm.
sh
```
npm install @twind/core
```
Define the configuration
Using an extra file, twind.config.js, allows some tools like IntelliSense to find your configuration.
twind.config.js
js
```
import { defineConfig } from '@twind/core'

export default defineConfig({
  /* options */
})
```
Load Twind in your application entry point.
install creates and registers a twind instance that will generate the styles. This allows third-party packages to import tw from the twind package and get the same instance.
index.js
js
```
import { install } from '@twind/core'
import config from './twind.config'

// activate twind - must be called at least once
install(config)
```

Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

Install the presets

All presets are available on npm.

npm install @twind/preset-autoprefix @twind/preset-tailwind

Configure the presets

Each preset must be added to the presets array in the configuration.

twind.config.js

import { defineConfig } from '@twind/core'
import presetAutoprefix from '@twind/preset-autoprefix'
import presetTailwind from '@twind/preset-tailwind'

export default defineConfig({
  presets: [presetAutoprefix(), presetTailwind()],
})

Start using Twind in your HTML
Start using Twind classes to style your content.
html
```
<h1 class="text-3xl font-bold underline">Hello world!</h1>
```
Optional: Prevent FOUC

Incase you are not using static extraction to include the generated styles on the server apply the following pattern to prevent FOUC:
html
```
<body class="!block" style="display: none">
  
</body>
```
If any element has the autofocus attribute, Twind will focus it after all styles are injected.

TODO: Whats next? List and links of framework integrations. All official integrations are available on npm with the prefix @twind/with-.

Browser Usage

Twind is available as a global browser script and can be used directly in the browser.

Tip

We recommend to use Twind CDN if you want to use Tailwind utilities.

Add the Twind script to your HTML

Add the script tag to the <head> of your HTML file.

html

<head>
  <script src="https://cdn.jsdelivr.net/npm/@twind/core@1" crossorigin></script>
</head>

Create the environment

install creates a twind instance that will observe class attributes and generate the corresponding styles.

html

<head>
  <script src="https://cdn.jsdelivr.net/npm/@twind/core@1" crossorigin></script>
  <script>
    twind.install({
      /* options */
    })
  </script>
</head>

Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

Add the presets script to your HTML

All presets are available on npm.

html

<head>
  <script
    src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-autoprefix@1,npm/@twind/preset-tailwind@1"
    crossorigin
  ></script>
</head>

Configure the presets

Each preset must be added to the presets array in the configuration.

html

<head>
  <script
    src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-autoprefix@1,npm/@twind/preset-tailwind@1"
    crossorigin
  ></script>
  <script>
    twind.install({
      presets: [twind.presetAutoprefix(/* options */), twind.presetTailwind(/* options */)],
    })
  </script>
</head>

Start using Twind in your HTML
Start using Twind classes to style your content.
html
```
<body>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
```

Twind CDN

Twind CDN is a drop-in replacement for Tailwind CSS Play CDN that is 6 times smaller (104kb vs 17kB) without any build step right in the browser.

Hint

> @twind/preset-autoprefix and @twind/preset-tailwind are included out-of-the-box.

Add the Twind CDN script to your HTML
Add the script tag to the <head> of your HTML file.
html
```
<head>
  <script src="https://cdn.twind.style" crossorigin></script>
</head>
```

Optional: Add additional presets — @twind/preset-autoprefix and @twind/preset-tailwind are already included in Twind CDN.

To use other presets add their ids to the script src attribute:

Add the preset to Twind CDN script in your HTML

All presets are available on npm.

html

<head>
  <script src="https://cdn.twind.style/ext,line-clamp,forms,typography" crossorigin></script>
</head>

Configure the presets

Each preset must be added to the presets array in the configuration.

html

<head>
  <script src="https://cdn.twind.style/ext,line-clamp,forms,typography" crossorigin></script>
  <script>
    twind.install({
      presets: [
        twind.presetExt(/* options */)
        twind.presetLineClamp(/* options */)
        twind.presetTailwindForms(/* options */)
        twind.presetTypography(/* options */)
     ],
    })
  </script>
</head>

Start using Twind in your HTML
Start using Twind classes to style your content.
html
```
<body>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
```

Installation

Local / Bundler

Browser Usage

Twind CDN

What to read next

Integrations

Migration