@tailwindcss/vite should work with vite 6.

[nevil2]

If I force install, it appears to work fine.

Is it just a case of changing the dependency or is further changes needed?

[philipp-spiess]

Hey! We'll have this fixed in the next beta release that should go out very soon! It's just a wrongly set peer dependency.

[nevil2]

It worked yesterday when I force installed.

Today I get error (same on two different projects):

4:49:55 PM [vite] (ssr) Error when evaluating SSR module /node_modules/@sveltejs/kit/src/runtime/control.js:
|- TypeError: Cannot read properties of undefined (reading 'Sequential')
    at scan (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/@tailwindcss/vite/dist/index.mjs:34:10)
    at TransformPluginContext.transform (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/@tailwindcss/vite/dist/index.mjs:90:9)
    at EnvironmentPluginContainer.transform (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:47010:19)
    at loadAndTransform (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:40848:49)

node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^

Error [TypeError]: Cannot read properties of undefined (reading 'Sequential')
    at scan (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/@tailwindcss/vite/dist/index.mjs:34:10)
    at TransformPluginContext.transform (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/@tailwindcss/vite/dist/index.mjs:90:9)
    at EnvironmentPluginContainer.transform (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:47010:19)
    at loadAndTransform (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:40848:49) {
  plugin: '@tailwindcss/vite:scan',
  id: '/home/nevil/dev/alpine/ac-sveltekit/node_modules/@sveltejs/kit/src/runtime/control.js',
  pluginCode: 'export class HttpError {\n' +
    '\t/**\n' +
    '\t * @param {number} status\n' +
    '\t * @param {{message: string} extends App.Error ? (App.Error | string | undefined) : App.Error} body\n' +
    '\t */\n' +
    '\tconstructor(status, body) {\n' +
    '\t\tthis.status = status;\n' +
    "\t\tif (typeof body === 'string') {\n" +
    '\t\t\tthis.body = { message: body };\n' +
    '\t\t} else if (body) {\n' +
    '\t\t\tthis.body = body;\n' +
    '\t\t} else {\n' +
    '\t\t\tthis.body = { message: `Error: ${status}` };\n' +
    '\t\t}\n' +
    '\t}\n' +
    '\n' +
    '\ttoString() {\n' +
    '\t\treturn JSON.stringify(this.body);\n' +
    '\t}\n' +
    '}\n' +
    '\n' +
    'export class Redirect {\n' +
    '\t/**\n' +
    '\t * @param {300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308} status\n' +
    '\t * @param {string} location\n' +
    '\t */\n' +
    '\tconstructor(status, location) {\n' +
    '\t\tthis.status = status;\n' +
    '\t\tthis.location = location;\n' +
    '\t}\n' +
    '}\n' +
    '\n' +
    '/**\n' +
    " * An error that was thrown from within the SvelteKit runtime that is not fatal and doesn't result in a 500, such as a 404.\n" +
    ' * `SvelteKitError` goes through `handleError`.\n' +
    ' * @extends Error\n' +
    ' */\n' +
    'export class SvelteKitError extends Error {\n' +
    '\t/**\n' +
    '\t * @param {number} status\n' +
    '\t * @param {string} text\n' +
    '\t * @param {string} message\n' +
    '\t */\n' +
    '\tconstructor(status, text, message) {\n' +
    '\t\tsuper(message);\n' +
    '\t\tthis.status = status;\n' +
    '\t\tthis.text = text;\n' +
    '\t}\n' +
    '}\n' +
    '\n' +
    '/**\n' +
    ' * @template {Record<string, unknown> | undefined} [T=undefined]\n' +
    ' */\n' +
    'export class ActionFailure {\n' +
    '\t/**\n' +
    '\t * @param {number} status\n' +
    '\t * @param {T} data\n' +
    '\t */\n' +
    '\tconstructor(status, data) {\n' +
    '\t\tthis.status = status;\n' +
    '\t\tthis.data = data;\n' +
    '\t}\n' +
    '}\n' +
    '\n' +
    '/**\n' +
    ' * This is a grotesque hack that, in dev, allows us to replace the implementations\n' +
    " * of these classes that you'd get by importing them from `@sveltejs/kit` with the\n" +
    ' * ones that are imported via Vite and loaded internally, so that instanceof\n' +
    ' * checks work even though SvelteKit imports this module via Vite and consumers\n' +
    ' * import it via Node\n' +
    ' * @param {{\n' +
    ' *   ActionFailure: typeof ActionFailure;\n' +
    ' *   HttpError: typeof HttpError;\n' +
    ' *   Redirect: typeof Redirect;\n' +
    ' *   SvelteKitError: typeof SvelteKitError;\n' +
    ' * }} implementations\n' +
    ' */\n' +
    'export function replace_implementations(implementations) {\n' +
    '\t// @ts-expect-error\n' +
    '\tActionFailure = implementations.ActionFailure; // eslint-disable-line no-class-assign\n' +
    '\t// @ts-expect-error\n' +
    '\tHttpError = implementations.HttpError; // eslint-disable-line no-class-assign\n' +
    '\t// @ts-expect-error\n' +
    '\tRedirect = implementations.Redirect; // eslint-disable-line no-class-assign\n' +
    '\t// @ts-expect-error\n' +
    '\tSvelteKitError = implementations.SvelteKitError; // eslint-disable-line no-class-assign\n' +
    '}\n',
  runnerError: Error: RunnerError
      at reviveInvokeError (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/module-runner.js:545:18)
      at Object.invoke (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/module-runner.js:628:15)
      at async SSRCompatModuleRunner.getModuleInformation (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/module-runner.js:1200:73)
      at async SSRCompatModuleRunner.import (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/module-runner.js:1110:27)
      at async instantiateModule (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:30569:12)
      at async align_exports (file:///home/nevil/dev/alpine/ac-sveltekit/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:374:31)
}

Node.js v22.11.0

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vitest/config'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
	plugins: [
		tailwindcss(),
		sveltekit(),
	],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	preview: {
    port: 5137,
  },
})

[philipp-spiess]

@nevil2 what version of the vite plugin are you using? we just released a new beta that should have a fix for this, I wonder if this is related to your new issue though. How did you run the build? just vite build?

[nevil2]

error with npm run dev

vite 6.0.2
tailwindcss 4.0.0-beta.5
@tailwindcss/vite 0.0.0-development.1
@sveltejs/vite-plugin-svelte 5.0.1
@sveltejs/kit 2.9.0

I've gone back to using @tailwindcss/postcss for now

[philipp-spiess]

@nevil2 Looks like the vite plugin is on a wrong version here, do you mind updating it to the latest one? It needs to match the tailwindcss version: npm i @tailwindcss/vite@next

[nevil2]

apologies - my mistake - it is working now.