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).
Presets need to be installed and added to the
presets option of the
All official presets are available on npm with the prefix
- @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
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: