1. Getting Started
  2. Presets

Getting Started


Presets group common configuration, like rules and variants, into a reusable package.

The Twind core package does not include any utilities — all utilities are provided via presets or user configuration.

The most common task of a preset is to add custom rules and variants.

  • Rules are responsible for generating CSS declarations for a given class name.
  • Variants allow to specify under what circumstances utilities will be activated.

For the full Tailwind CSS experience use @twind/preset-tailwind or start with Twind CDN a drop-in replacement for Tailwind CSS Play CDN that is 6 times smaller (104kb vs 17kB).

Using Presets

Presets need to be installed and added to the presets option of the twind config.

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

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

Official Presets

All official presets are available on npm with the prefix @twind/preset-.

Community Presets


To find community presets search for the keyword twind-preset on npm.

Create A New Preset

TODO: Add documentation for creating a new preset.

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