Tailwind v4 with SvelteKit ⛵ Modern CSS config without JS! 🔴 LIVE Coding & Chill
Tailwind is as popular as ever, and after many years in the stable v3... Version 4 has officially been released!
Switching to Vite like all the cool kids, with a Javascript-less config right in our CSS file, let’s have a quick look on how we can set it up in a SvelteKit project!
The approach is similar to my video all those years ago, and all the tips still hold true, so you may fancy a look:
• Tailwind with SvelteKit: How to setup + bo...
🚀 Click around the app yourself: https://emoji-of.com/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/emoji-of
Check around the channel for more playlists and increasingly complicated tech stack choices 🙌
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
[ ] What are we doing today? Tailwind version 4?!
[ ] Let’s bring in Tailwind v4! Easy cause it’s Vite?! https://tailwindcss.com/docs/installa...
[ ] Referencing Tailwind in style blocks: https://tailwindcss.com/docs/installa...
[ ] Dark mode (with `data-theme` attribute): https://tailwindcss.com/docs/dark-mod...
[ ] What’s the app we’re making anyway?
[ ] What about Tailwind’s upgrade tool? https://tailwindcss.com/docs/upgrade-...
[ ] What about `shadcn`? https://next.shadcn-svelte.com/
[ ] What about those COLUMNS? https://tailwindcss.com/docs/columns & https://developer.mozilla.org/en-US/d...
[ ] Final 🥳 DEMO + LIKE 💜 SUBSCRIBE
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
Tailwind: https://tailwindcss.com/
SvelteKit: https://kit.svelte.dev/
bits-ui: https://next.bits-ui.com/docs/introdu...
shadcn-svelte: https://next.shadcn-svelte.com/
My own website: https://magrippis.com/
And, of course, remember: Get this repository AND MORE with Johnnify Premium!
https://johnnify.com/premium
Search for `@jmagrippis` to find me on socials like Instagram & Threads! And I’m most active in our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 145!
— TIMESTAMPS —
00:00 - What are we doing today? Tailwind version 4?!
2:10 - Let’s bring in Tailwind v4! Easy cause it’s Vite?!
8:07 - Tailwind Works 🥳 DEMO
12:07 - Referencing Tailwind in style blocks
17:57 - Colours & theme variables 🎨 CSS Variables Plus
27:30 - What’s the app we’re making anyway?
31:58 - What about `shadcn`?
37:02 - Dark mode 🌘 system, class & with `data-theme`
44:24 - What about Tailwind’s upgrade tool?
45:35 - What about Catalyst from TailwindUI?
48:40 - Let’s make a nice button!
1:11:06 - Let’s fetch and show a random emoji!
1:41:39 - Final 🥳 DEMO + LIKE 💜 SUBSCRIBE