@twind/with-sveltekit

READ THIS FIRST!

Twind v1 is still in beta. Expect bugs!

Seamless integration of twind with SvelteKit

Used within the following examples:

• SvelteKit

Installation

Install from npm:

npm install twind@next @twind/with-sveltekit@next

Usage

Please see examples/with-sveltekit for detailed usage example.

src/twind.config.js

import { defineConfig } from 'twind'

export default defineConfig({
  /* config */
})

@twind/with-sveltekit will use hashed class names in production by default. If you don't want this, you can use the hash config option:

export default defineConfig({
  hash: false,
  /* config */
})

src/routes/__layout.svelte

<script context="module">
  import install from '@twind/with-sveltekit'
  import config from '../twind.config'
  install(config)
</script>

src/hooks[^1]

Enable server-side rendering of Twind styles.

import handleTwind from '@twind/with-sveltekit/hooks'

export const handle = handleTwind()

If you have other handlers use the sequence helper:

import { sequence } from '@sveltejs/kit/hooks'

export const handle = sequence(handleTwind(), ...otherHandlers)

[^1]: SvelteKit › Hooks