Setting Sveltekit 5 with Tailwind 4

Victor Hugo Bueno — Sat, 08 Feb 2025 22:24:23 +0000

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(),
  ],
});

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.

DEV Community: Victor Hugo Bueno

Setting Sveltekit 5 with Tailwind 4

Happy Coding!