Getting Started

Presets

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.

Tip

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.

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()],
})

Official Presets

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

@twind/preset-autoprefix — provides a CSS vendor prefixer and property alias mapper
@twind/preset-container-queries — provides utilities for container queries
@twind/preset-ext — adds some commonly used rules and variants that are not part of Tailwind CSS
@twind/preset-line-clamp - adds utilities for visually truncating text after a fixed number of lines
@twind/preset-tailwind — adds all Tailwind v3 classes
@twind/preset-tailwind-forms — provides a basic reset for form styles
@twind/preset-typography — add beautiful typographic defaults

Community Presets

Tip

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: