presets.md

section	title	excerpt	next
Getting Started	Presets	Presets group common configuration, like rules and variants, into a reusable package.	./integrations.md

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.

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:

• @twind/preset-ext/src/index.ts
• @twind/preset-line-clamp/src/index.ts
• @twind/preset-tailwind/src/index.ts
• @twind/preset-tailwind-forms/src/index.ts
• @twind/preset-typography/src/index.ts