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 😉
Click around the app yourself: https://tailwind-with-svelte.vercel.app/
See the code: https://github.com/jmagrippis/tailwin...
Written guide by yours truly: https://magrippis.com/blog/2021/how-t...
Highlighted software:
Tailwind 3: https://tailwindcss.com/blog/tailwind...
SvelteKit: https://kit.svelte.dev/
Relevant videos:
GUI Challenges | Color Schemes: • Thinking on ways to solve COLOR SCHEMES
Tailwind with Next.js: • Tailwind with Next.js: Setup, JIT and...
🎶 "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 😄
My own website: https://magrippis.com/
--
TIMESTAMPS
--
0:00 - Tailwind 3 with SvelteKit!
0:34 - New SvelteKit project
1:10 - Setting up Tailwind
3:07 - tailwind.css & “composed” classes
4:11 - Useful tailwind.config options
4:50 - Dark mode, CSS vars + comment & subscribe