The Twind core package does not include any utilities — all utilities are provided via presets or user configuration.
- Rules are responsible for generating CSS declarations for a given class name.
- Variants allow to specify under what circumstances utilities will be activated.
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-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.
TODO: Add documentation for creating a new preset.
Here are some examples of how to write your own preset: