Use With
Setting up Twind for seamless integration in a SvelteKit project.
- 📝 Inspect the example
- 📓 Consult the API reference
- 📜 Read the changelog
🤝 Compatibility
@twind/with-sveltekit | @sveltejs/kit |
---|---|
>=1.1.0 <1.2.0 | >=1.0.0 <2 |
>=1.0.0-next.38 <1.1.0 | >=1.0.0-next.391 <1 |
>=1.0.0-next.1 <1.0.0-next.38 | >=1.0.0-next.100 <1.0.0-next.391 |
📦 Installation
-
Install from npm
@twind/core
and@twind/with-sveltekit
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. -
Load Twind in the root layout
install
creates and registers a twind instance that will generate the styles. This allows third-party packages to importtw
from the twind package and get the same instance. -
Enable Twind in hooks
Enable server-side rendering of all the styles that are used within the HTML and sending them to the client.
If you have other handlers use the
sequence
helper: -
Optional: Install and configure the recommended presets
@twind/preset-autoprefix
and@twind/preset-tailwind
.Install the presets
All presets are available on npm.
Configure the presets
Each preset must be added to the
presets
array in the configuration. -
Start using Twind in your svelte component
Start using Twind classes to style your content.