Tailwind with SvelteKit: How to setup + bonus tips

Tailwind and SvelteKit, two awesome frontend frameworks that grew even more in 2021... Let’s put them together!

This is a bit of a celebration of my OG video this time last year, when I did unspeakable Snowpack things to a pre-alpha version of SvelteKit to get Tailwind working 😬

Were you around back then? It remains my most successful video, even though it’s out of date, especially since SvelteKit switched to Vite... but even Tailwind had a breaking change with version 3 / the JIT compiler!

The channel has grown since, help it grow more by commenting & subscribing 😉

Highlighted software:

Relevant videos:

🎶 "Neroli" by Ennio Máno and "Harry’s Dream" by Harry Edvino for the background music 🎶

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

--
TIMESTAMPS
--
0:00 - Tailwind 3 with SvelteKit!
0:34 - New SvelteKit project
1:10 - Setting up Tailwind
4:50 - Dark mode, CSS vars + comment & subscribe

[raskolnikov]

Thank you a million times over! I have tried a dozen different things, and watched a dozen different youTube videos, to help me figure this out. Your explanation was easy to follow and was the only one that actually worked. Awesome. Thanks again.

[rummankalam]

Fantastic video. It was very easy to follow.

[jpgarcia]

css vars yes. These short videos are cool, I figure you could be uploading at least 2 o 3 of these per day haha. Looking forward to the next one!

[jayofthebuj]

Super awesome video Johnny, it makes learning easy. Thank you!!! Please drop a video on theming. And what's your approach on accessibility

[cebuanoninoy]

Nice content Johnny. Keep it going! New sub here.

[Tszyu]

Great videos Johnny! Have you tried daisyUI (tailwind css components)?

[ddrci]

can you make wordpress theme tutorial with tailwind and sveltekit? thanks

[WirIez]

Hum interesting 🤔 I ended up with a very different approach to get tailwindcss working with JIT and all. But now I am unsure why this simple setup didn't work out for me... Maybe I should try it again! Now I have a different process running for tailwindcss which is checking for changes and it will generate another css files called tailwind-output.css. I think I did it this way because otherwise JIT wouldn't work properly and I had to restart the app whenever I used an "unused" class or applied hover effects and so on.