SvelteKit

🤝 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

1. Install from npm

   @twind/core and @twind/with-sveltekit are available on npm and need to be installed together.

   sh ✓ ✗

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

2. Define the configuration

   Using an extra file, twind.config.js, allows some tools like IntelliSense to find your configuration.

   js ✓ ✗

   import { defineConfig } from '@twind/core'
   
   export default defineConfig({
     /* @twind/with-sveltekit will use hashed class names in production by default
      * If you don't want this, uncomment the next line
      */
     // hash: false,
   })

3. Load Twind in the root layout

   install creates and registers a twind instance that will generate the styles. This allows third-party packages to import tw from the twind package and get the same instance.

   js ✓ ✗

   import install from '@twind/with-sveltekit'
   import config from '../../twind.config'
   
   install(config)
   
   // Optional: add a load function

4. Enable Twind in hooks

   Enable server-side rendering of all the styles that are used within the HTML and sending them to the client.

   js ✓ ✗

   import handleTwind from '@twind/with-sveltekit/hooks'
   
   export const handle = handleTwind()

   If you have other handlers use the sequence helper:

   js ✓ ✗

   import { sequence } from '@sveltejs/kit/hooks'
   
   export const handle = sequence(handleTwind(), ...otherHandlers)

5. Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

   Install the presets

   All presets are available on npm.

   sh ✓ ✗

   npm install @twind/preset-autoprefix @twind/preset-tailwind

   Configure the presets

   Each preset must be added to the presets array in the configuration.

   js ✓ ✗

   import { defineConfig } from '@twind/core'
   import presetAutoprefix from '@twind/preset-autoprefix'
   import presetTailwind from '@twind/preset-tailwind'
   
   export default defineConfig({
     presets: [presetAutoprefix(), presetTailwind()],
   })

6. Start using Twind in your svelte component

   Start using Twind classes to style your content.

   html ✓ ✗

   <h1 class="text-3xl font-bold underline">Hello world!</h1>