Setting Sveltekit 5 with Tailwind 4

#webdev #svelte #sveltekit #tailwindcss

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