Build an App with SvelteKit and Tailwind CSS

Have you tried out the hottest new framework in Web Development? In this video, we'll create a TODO app using SvelteKit and Tailwind CSS.
Source Code -github.com/jam...
Avneesh's Blog - blog.avneesh.t...
Johnny Magrippis RUclips - / @jmagrippis
SvelteKit + Tailwind Setup - magrippis.com/...
STAY IN TOUCH 👋
Check out the Podcast - compress.fm
Newsletter 🗞 - www.jamesqquic...
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquic...
Learn Web Development 📖 - www.jamesqquic...

[@JamesQQuick]

Make sure to check out Part 2 where we add Supabase, authentication, and more! ruclips.net/video/YqIyET7XKIQ/видео.html

[@kirso]

Yes for part2 please! Would be cool to include TypeScript + Data storage

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@Protoscribe]

Hey James, do the second tutorial. I started using Sveltekit like the day it released and auth was one of the things I had to figure out, at least doing it in a correct way. Also people might enjoy seeing endpoints and context module being used in conjunction to talk with an API

[@andylib]

Agreed

[@misterjaypeasmith]

+1

[@timsonner]

Yes, please. I am also highly interested in CRUD operations with SvelteKit. Maybe using PostgreSQL??, whatever db you prefer. On a side note, Rich Harris just joined with Vercel, and is now working on Svelte full time. Kinda big news on par with log4js. Great channel, would greatly enjoy ep 2. Also, gonna try Thunder Client extension for VSC, thanks for the heads up. +1

[@Protoscribe]

@@timsonner You should check out Prisma and try setting up a project with Sveltekit using it in endpoints in the meantime. Definitely great news about Rich joining Vercel, I actually watched an interview which he mentions it on the 14th.

[@timsonner]

@@Protoscribe Very cool, I was just on the Prisma site, they did a great job (beautiful site, great documentation). Here is a link to the Vercel interview with Rich Harris being interviewed by Lee Robinson:
ruclips.net/video/uQntFkK8Z54/видео.html
Thanks for the heads up on Prisma.

[@cobratateco.6041]

Sveltekit and tailwind look so smooth together definitely gonna use these for my to-go tech stack

[@DaveLaneNZ]

Would love a data persistence & authentication tutorial as part 2! Would love to see it with using a microservice using Express + PostgreSQL!

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@tahaahmedkhan598]

please Make a complete sevelte playlist with backend connectivity it gives a lot of help !

[@alexdewergifosse6177]

Def keen for part 2!

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@timewolf5510]

Awesome, thank you James!

[@denniszenanywhere]

Would love it if you do more videos with database. Something with complex designs would also be great.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@raymondmichael4987]

I think RUclips's like button is broken, it only respond once though I clicked many times 😌😌
Thanks man this is much better, waiting for the second part

[@michaelrandazzo1957]

I got stuck almost immediately. My import won't recognize my css file. I tried moving it to the source folder, changing out the '@tailwind' with some plain css to modify the paragraph. This can be so frustrating sometimes.

[@thewiscokid81]

Yes please do the second part

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@jornesaenen]

very excited for sveltekit, please do part 2

[@JamesQQuick]

Coming next week! :)

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@danielrodas7692]

For anyone getting this error message: Cannot read properties of undefined (reading 'config')
Create a new file called tailwind.config.cjs file under your root dir and add the following:
// tailwind.config.cjs
module.exports = {
purge: ['./src/**/*.svelte', './src/**/*.css'],
darkMode: false,
theme: {},
variants: {
extend: {},
},
plugins: [],
}

[@cristiancassetta]

Great! Thanks a lot, it works now.

[@stankyfiles]

bless you man sheeeeesh, thought id get stuck 7mins into the video!

[@hamzaha4506]

thanks bro

[@yoshi661]

thankyou for quick guide

[@maxkirwin1474]

Part 2 would be insane ! Firebase or maybe supabase ?

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@abeechr]

Yes, please make one with the backend.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@dand4485]

Would be interesting to see if/when you do the persistent store, how about doing a 2fer, meaning you use TypeScript. Even better take the current version, and retrofit both the date store and Typescript. Thanks.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@msitman]

Part 2 please :)

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@wilfried2701]

Anyone knows what color theme he's using ?

[@mehrannaghizadeh5033]

It twas a very clear explanation. Good job. Would you also do the typescript version, please? Thanks

[@JamesQQuick]

Yes, I need to do more TypeScript stuff!!

[@haguerrerob]

Hi James. I am trying to change the favicon that comes by default with svelteKit but I have not been able to do it, I have tried several methods and none have worked. in theory, the favicon image is located in /static. and is called from the html with:
I change the image of the static folder but it does not modify the output. do you have any method to do it? thank you

[@douglashoffmann4661]

Hey, really nice video! I hope you could get a little deeper into svelte kit doing something that uses database and handle searchQuery and such. The docs about page load are not that good.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@Booyamakashi]

Im trying to use Sveltekit as SSG, but no luck yet. I cannot deploy any server-side code, i want to have bunch of html pages that i can host on AWS S3 - is this something you could cover?

[@PabloArceo-synclab]

Yes to dB part 2. 🙏🏼

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@PabloArceo-synclab]

@@JamesQQuick thanks james!

[@muhammadyasser1987]

25:11 pun intended?! :D

[@marcokohn5762]

James, could you link the video with this nice intellisense feature in the console? Thanks.

[@jedliu8671]

This will help. ruclips.net/video/SyOnB1qvPn0/видео.html

[@lovaion]

I would love if you could do a tutorial based on svelte kit and firebase auth with creating and getting documents

[@JamesQQuick]

Part 2 has been published with Supabase! ruclips.net/video/YqIyET7XKIQ/видео.html

[@thegreatprogrammer5937]

12:50 No Its not by default. By default it is

[@vincej151]

Svelte is great. No question. I love it, but one significant problem - it has no community support to speak of. Vercel is backed by venture capitalists - basically sharks. If things don't give them a rapid return will they stick by Svelte or dump it? Do I dare gamble my customers that it will still be here is 2 years?

[@willinton06]

Well, since it is so much better than the alternatives it will most probably survive for years to come

[@computerscience1152]

Freaking cool

[@TheROck3052]

Sorry that don't works for me. ;)

[@timsonner]

Part 2 with auth0!!!!!!! Por favor.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@bradtriplett6629]

Nice video,
It is really helpful to us traders, investing in crypto is the best and fastest way of making money, but only few understood the secret of crypto currency.

[@savior1085]

I'm surprised you know her too. I've been making a lot of profits investing with her for a few months now.??

[@susan6699]

You invest with Mrs addison too? Wow that woman has been a blessing to me and my family??.

[@bradtriplett6629]

@ben james You can reach her on Telegram with the user name

[@bradtriplett6629]

@ben james Thanks i just message her now investwithaddison

[@evans8245]

James, what does the Q in your name mean ?

[@NibbyBanana]

Quentin

[@NibbyBanana]

Also, Quality :)

[@АртёмБелоконский-э9р]

second, pleeeeease

[@migueljarias]

Part 22222

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@dinckelman]

Honestly speaking, i'd love to see TS in all future projects. It's a bit of extra effort, but the benefits are just unparalleled

[@JamesQQuick]

Yeah it’s a tough balance with RUclips content because of the setup time and not knowing if everyone that is watching has that experience. Regardless I definitely want to do more!

[@goummoboris5194]

Hi James. Lovely 3 years old tutorial. Coming back to the togglemethod in our store. Is there a way to pass in directly the todo object and mutate its selscted attribute directly ? Hoping that we donot traverse through the whole store.

[@raymondmichael4987]

Part two will be quite nice, with authentication and cloud dB, preferably nosql (firebase or mongodb).
I had trouble connecting sveltekit with firebase v9 hopefully you can shade some light
Though we requested a part two of Pokémon app you didn’t last time using sveltekit, I guess it won’t happen.
BTW, thanks for doing this buddy

[@JamesQQuick]

Haha fair enough. It’s hard to keep up with all the part 2s. I wish I had more time lol

[@raymondmichael4987]

@@JamesQQuick I understand, it's oukay brother; just do justice on this one; this is already huge.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@alex_oceann]

Thank you for the great videos! They're super helpful. Would you be interested in doing a Part 3 where you show how to integrate SvelteKit with the URQL GraphQL client, then use Capacitor to turn it into a native mobile app?
Thank you!

[@avneesh0612]

Great video and enjoyed this collab as well! Looking forward to more of these 🥂

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@HaakonHestness]

Cool tutorial, yet when I add the postcss.config.cjs file it throws an error. I've tried several times but keep getting - TypeError: Cannot read properties of undefined (reading 'config')
at getTailwindConfig

[@ChakritTansakul]

add tailwind.config.cjs at the root directory
//tailwind.config.cjs
module.exports = {
content: ["./src/**/*.{html,js,svelte}"],
theme: {
extend: {},
},
plugins: [],
}
solved for me.

[@vipinjose5552]

@@ChakritTansakul Thanks. This helped me to get it working

[@streamingdev1163]

@@vipinjose5552 Great suggestion this worked for me too

[@mwnkt]

Svelte is always amazing, would really like it if you could do more svelte videos. could you also do a video on deploying a sveltekit app to vercel or netlify I've been getting build errors.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@galaxiegalaxie5003]

Thank you, could you do the video on jwt, how to secure it, save it from vulnerability, whats the best practices and recommendation.Also please do the videos about dashboard after login where content will be loaded dynamically with click on nav.Also how do we secure page or route.

[@jesper.ordrup]

Hi James. Keep up the svelting 😀🤙
Check svelte for direct support for conditional class assignments. Also, the moment you find that you repeat a styling then create a component. Buttons etc ..
Would love to see Auth example.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@robsonvs]

I'm starting learn svelte and I'm straggling with endpoints

[@hiberniankingy]

I used this to add Tailwind to Sveltekit incase anyone is interested :
tailwindcss.com/docs/guides/sveltekit

[@jsnow301]

thanks, this fixed my issue with styling not appearing

[@irlshrek]

I fucking love svelte and sveltekit

[@jeffmchale5826]

This was an amazing video! I would very much be interested in a part 2 that communicates with a DB and includes authentication.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@michongoma7598]

Part 2 please!

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@riigel]

bruh.. whats your vscode theme?

[@nathanielcameron8006]

AYO SUH MY DOOOD

[@MACAproject]

what version of nodejs are you using?

[@scott_itall8638]

What do you use for screen capture?

[@b0gie]

yay

[@GermanLc]

so now how do i deploy it to my server?

[@popey4525]

Tailwind config not working for me, I got a SSR error : "Error when evaluating SSR module /src/routes/__layout.svelte", and then it written "Cannot read property 'config' of undefined".
I can't find a good solution on internet, anyone has an idea of how to fix it ?

[@jsnow301]

have to make the config file first, skip a minute into the video

[@Antonio-fo4fl]

Please do the second tutorial.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@Antonio-fo4fl]

@@JamesQQuick YOU LEGEND!!

[@sulemanmughal5397]

Sir plz part 2 😃

[@Mavesound]

I've had a lot of struggles with sveltekit & their transitions between pages, not sure if i'm 100% fan of it

[@devcoder6326]

Amazing!

[@Warpgatez]

Interesting introduction to svelte for me. Seems pretty easy. You seem knowledgeable. Just slow down. Lots of tiny technical mistakes due to rushing. I’m going to check your channel out but good job!

[@TannerBarcelos]

Man Svelte / Sveltekit is so awesome. I think React/Next and Svelte/Sveltekit + TS and Tailwind in my frontend toolbox is going to be so valuable.

[@RickGraner]

DB plz and perhaps some kinda refresh token auth w/a backend for todos, If you show ppl that, they pretty much can build their own social media app and take on the world ;) Great job!

[@toup0]

Nice that you ask if we want to see more typescript 😊 Yes please sir! Typescript + sveltkit wombo combo would be awesome!

[@nicholassingh138]

Hey can you a udemy course or something like a event pass where people can create and event and only view their users that signed up. Would be great to learn about policies

[@НиколайКол-е2и]

Great video. I assume so much inline styling is due to "just a demo", but since i new to svelte and some tutorials saying that svelte convert all styles to its own format (adding svelte prefixes) i was wondering if it is possible/how easy is to fully separate svelte app from css (use classes and ids in svelte component and external css for styling)?

[@dongums]

that class technique using template literal was awesome. i use class directive from svelte docs. but i think using template literal has it advantages. specially together with tailwind

[@jasonbrooks737]

good quality video! content, sound, font size, clarity all is just correct. thank you.

[@nickreutlinger]

Great tutorial, pleaseeee do a Part 2 with Firebase!

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@nickreutlinger]

@@JamesQQuick Supabase is even better :)

[@gilatron1241]

What extension is changing how arrow functions and != look? It looks really nice

[@tvbreum5325]

Nice short introduction.

[@JamesQQuick]

Thank you!!

[@PeterMumford]

nice work James

[@JamesQQuick]

Thank you!!

[@MrMikeyberger]

yes very interested

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@aingarant]

In your opinion is SvelteKit production ready?

[@jaymartinez311]

Great video and typescript for sure 😉 💪🏾

[@michaels8398]

Would love a part 2 with mongodb and auth0

[@subhasishdas6930]

need auth, saving to db and pwa features too.

[@aaronabuusama]

bruh... why is no TS even an option?!?

[@JamesQQuick]

Lol think it should just be required?

[@aaronabuusama]

@@JamesQQuick 100% I genuinely do not see a reason why you would build anything without it these days. even of you dont use any types or TS syntax your dx is going to be better. There is an argument to be made if your writing a library but even imho its a no

[@destinlee]

But it's Thursday!!

[@vaniad555]

Thank you for the quick tut, awesome job, hopefully, we see part 2 ...

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@darrylv.5400]

Yes please, a second part with auth & storage would be great and much appreciated.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@piccolorio]

This is great! Please do the second part with db and auth when you can.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@aashrith9680]

Interested in part2 for learning auth and db

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@bobdobbs8397]

Please do the database tutorial you mentioned. I finished a few Udemy courses and trying to learn Sveltekit. Can't find anything to do with interacting with database tho. Great channel.

[@JamesQQuick]

Will do. My podcast cohost are working on a new course for next year. You can sign up at everythingsvelte.com

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@bobdobbs8397]

@@JamesQQuick Looking forward to it, glad to see you went with Supabase as well.

[@makexdix5962]

I am interested for part 2.

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@mazdaknazemi8268]

we are interested :)

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@kvetoslavnovak423]

The part 2 would be great!!!

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@tommyeliassen4539]

Yes to part two! :)

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@ronaldvanmeurs8039]

For sure a part two as well, keep up the great work!

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@muhammadyasser1987]

We want part 2. Thanks James!

[@JamesQQuick]

Coming soon!

[@JamesQQuick]

Part 2 has been published! ruclips.net/video/YqIyET7XKIQ/видео.html

[@purpinkn]

Bleh tailwind is useless

[@bakre_dev8728]