Setting Sveltekit 5 with Tailwind 4
Victor Hugo Bueno

Victor Hugo Bueno @vhbueno

Joined:
Jul 17, 2021

Setting Sveltekit 5 with Tailwind 4

Publish Date: Feb 8
3 1

UPDATE: New version of sveltekit project creator is already using tailwind version 4.

The Tailwind configuration indicated on the Tailwind website for integration with Sveltekit removes the dependency on postcss.

(I will use bun for package management)

Here are the steps for the new configuration:

1 - Remove all references to postcss and autoprefixer from your package.json.

2 - Update your libraries:

bun install

bun update

3 - Install the new Tailwind libraries:

bun install tailwindcss @tailwindcss/vite

4 - Perform the new configurations in vite.config.ts. Note that the import of defineConfig previously came from 'vitest/config', and now it's just 'vite'.

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
  ],
});
Enter fullscreen mode Exit fullscreen mode

5 - Import tailwind in app.css

@import "tailwindcss";

Warning 1: Remove references to postcss in the <style lang="postcss"> tags.

Warning 2: It will no longer be possible to use the @apply command.

Happy Coding!

Comments 1 total

Add comment