How to add tailwind 4 alpha to sveltekit 5?

[traderift]

This didn't work inside of vite.config.js, how can we add it?

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

[Septimus]

I believe you need to use the PostCSS plugin, not the vite plugin.

[Septimus]

Ignore my previous comment. I was able to get the Tailwind 4 vite plugin working. Are you able to share a repo example for us to review and help you out?

[traderift]

Hey I added on the postcss, and it worked. However would appreciate if you could show how you've added it to the vite <3

[ghosh]

I got it working by setting vite's css transformer to lightning css. Try this:-

export default defineConfig({
    plugins: [sveltekit(), tailwindcss()],
    css: {
        transformer: 'lightningcss'
    }
});

[radiorambo]

Create a ./src/app.css file with @import "tailwindcss";
Then create a ./src/routes/+layout.svelte file and import the newly-created app.css file with. Same as you did in tailwind v3 setup

<script>
	import '../app.css';
</script>
<slot />

[sjmueller]

Hi can someone share a complete (and idiomatic) example of adding tailwind 4 to a svelte 5 + sveltekit project? The comment thread so far is fragmented, and some parts misleading.

[markusstrasser]

+1

[kkirkfield]

I did not need to use lightningcss. Here are the steps I used to get this working in my projects.

1. Install Tailwind CSS v4 and the Vite plugin.

   npm install -D tailwindcss@next @tailwindcss/vite@next

2. Add the Tailwind CSS v4 Vite plugin to the end of vite.config.ts,

   vite.config.ts

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

3. Add an app.css file and import Tailwind CSS. See the blog post for more ways to import layers and customize: https://tailwindcss.com/blog/tailwindcss-v4-alpha

   src/app.css

   @import 'tailwindcss';

4. Import app.css from +layout.svelte. This example uses the new Svelte 5 runes. If you are using Svelte 4 you can use slots instead.

   src/routes/+layout.svelte

   <script lang="ts">
       import '../app.css'
   
       const { children } = $props();
   </script>
   
   {@render children()}

5. (Optional) Update VS Code settings to enable Tailwind CSS v4 intellisense. Also make sure you are using the pre-release version of the VS Code extension for intellisense to work: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

   .vscode/settings.json

   {
     "editor.quickSuggestions": {
         "strings": "on"
     },
     "files.associations": {
         "*.css": "tailwindcss"
     }
   }

[sjmueller]

tysm @kkirkfield 🙏 clear as day, and just what the svelte community needed to be inspired and give it a try

[lucas-subli]

This works overall. But the @apply syntax seems to be broken (Github issue).

Using a framewordk in RC stage with an ALPHA build of tailwind is prone to errors, who would have guessed...

[lucas-subli]

There is an ongoing discussion on @apply at #15205