This guide shows how to use Lit with Twind.
Install from npm
@twind/with-web-components are available on npm and need to be installed together.
Define the configuration
Using an extra file,
twind.config.js, allows some tools like IntelliSense to find your configuration.
Create a Custom Element
install creates a mixin that can be used to enhance elements with a shared stylesheet, generates styles for all used CSS classes and adds
this.tw (the twind instance) to the element instance.
The mixin function can be used with several elements — they all will share the same twind instance.
Using typescript and decorators
The mixin function can also be used as a decorator.
Please be aware that typescript will not be able to infer the additional properties (like
this.tw) added to the element class.
Optional: Install and configure the recommended presets
Configure the presets
Each preset must be added to the
presets array in the configuration.