Using Twind with Lit
- 📝 Inspect the example
- 📓 Consult the API reference
- 📜 Read the changelog
This guide shows how to use Lit with Twind.
In modern browsers this integration uses Constructable Stylesheet Objects and
adoptedStyleSheets for optimal performance. In legacy browsers, it falls back to using separate style elements (one per element instance) that are all kept in sync.
Install from npm
@twind/with-web-componentsare 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
installcreates 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.Important
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
Install the presets
All presets are available on npm.
Configure the presets
Each preset must be added to the
presetsarray in the configuration.