Integrations

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 after tree-shaking and faster performance.

Using Integrations

An integration usually has two parts:

1. Activate Twind

   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.

   js ✓ ✗

   import { install } from '@twind/core'
   import config from './twind.config'
   
   // activate twind
   install(config)

2. Static Extraction

   Extract the styles from the HTML eg server-side rendering.

   pseudo code - depends on the used framework or environment

   js ✓ ✗

   import { inline } from '@twind/core'
   
   function render() {
     const html = renderApp()
   
     // inject a style element with the CSS as last element into the head
     return inline(html)
   }

Official Integrations

All official integrations are available on npm:

• gatsby-plugin-twind — Gatsby
• @twind/with-next — Next.js
• @twind/with-remix — Remix
• @twind/with-sveltekit — SvelteKit

Community Integrations

Create A New Integration

TODO: Add documentation for creating a new integration.

Here are some examples of how to write your own integration:

• gatsby-plugin-twind
• @twind/with-next/src
• @twind/with-remix/src
• @twind/with-sveltekit/src