Getting Started

Installation

Twind is a small compiler that converts Tailwind 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 API.

npm
yarn
pnpm

npm install [email protected]

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

Twind does not include any core utilities — use one or more of the existing presets:

Here are some examples of how to write your own rules or variants:

Additionally we provides several integrations:

To get you started, take a look at the examples.

We have created a few examples to get you started:

ExampleTry it live atDescription
BasicStackblitzCodesandboxusing @twind/preset-autoprefix and @twind/preset-tailwind
PlaygroundStackblitzCodesandboxusing using all presets

Packages

ExampleTry it live atDescription
Tailwind FormsStackblitzCodesandboxusing @twind/preset-autoprefix and @twind/preset-tailwind and @twind/preset-tailwind-forms
Twind CDNStackblitzCodesandboxusing @twind/cdn

Frameworks

ExampleTry it live atDescription
GatsbyStackblitzCodesandboxwith Gatsby using gatsby-plugin-twind, @twind/preset-autoprefix and @twind/preset-tailwind
Next.jsStackblitzCodesandboxwith Next.js using @twind/with-next, @twind/preset-autoprefix and @twind/preset-tailwind
RemixStackblitzCodesandboxwith Remix using @twind/with-remix, @twind/preset-autoprefix and @twind/preset-tailwind
SvelteKitStackblitzCodesandboxwith SvelteKit using @twind/with-sveltekit, @twind/preset-autoprefix and @twind/preset-tailwind