1. Getting Started
  2. Installation

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.

  1. Install twind

    Twind is available on npm.

    sh
    npm install @twind/core
  2. 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 */
    })
  3. 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)
  4. Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

    Install the presets

    All presets are available on npm.

    sh
    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
    js
    import { defineConfig } from '@twind/core'
    import presetAutoprefix from '@twind/preset-autoprefix'
    import presetTailwind from '@twind/preset-tailwind'
    
    export default defineConfig({
      presets: [presetAutoprefix(), presetTailwind()],
    })
  5. 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>
  6. 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.

  1. 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" crossorigin></script>
    </head>
  2. 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" crossorigin></script>
      <script>
        twind.install({
          /* options */
        })
      </script>
    </head>
  3. 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,npm/@twind/preset-autoprefix,npm/@twind/preset-tailwind"
        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,npm/@twind/preset-autoprefix,npm/@twind/preset-tailwind"
        crossorigin
      ></script>
      <script>
        twind.install({
          presets: [twind.presetAutoprefix(/* options */), twind.presetTailwind(/* options */)],
        })
      </script>
    </head>
  4. 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.

  1. 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>
  2. 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>
  3. 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>

Get familiar with some of the core concepts that make Twind different from writing traditional CSS.

Integrations

How to use Twind in different frameworks and environments.

Migration

We have collected a list of changes in Migration › Twind v0.16 › Notable Changes. A detailed migration guide will follow.