Build a Svelte Popup/Overlay Component using Tailwind CSS in 15 Minutes

Svelte and Tailwind CSS work well together to create beautiful and powerful applications. In this video, learn how to create a Popup/Overlay component in Svelte using Tailwind CSS.

STAY IN TOUCH 👋

QUESTIONS...?

[JamesQQuick]

Check out Everything Svelte to learn everything you need to know about Svelte, SvelteKit, Supabase, and more!

[iDreamOfOkra]

James to the rescue once again! Exactly what I needed to do! Thanks!

[wahyusa]

Thank you!! This really has answered lot of question in my head

[everyhandletaken]

This is perfect timing, thank you!

Suggestion for future video.. floating action buttons. More specifically, a floating action menu that is fixed position & expands with additional actions on click/hover.

There are a few out there, but many are very material design focused (round, shadow, Color etc) & would love to see this done with svelte (using built in navigation)/tailwind, with your take on design.

[ign_ite]

It's the first time that I see a complete integration with Svelte and dudeeee this is great, you have to write almost nothing xD it blowed my mine when you just created a writable instead of all the context react boilerplate. Svelte is awesome!

[literallybiras]

Svelte is sweet, definitely gonna look out for the course

[FADHsquared]

This is soo cool! Also you made me know now that Svelte handles state management very prettily

[thekevmok]

What if you want to make multiple pop ups, do you need to make a writable for each or is there an more efficient way?

[ScriptRaccoon]

I really like Svelte's scale animation for such popups (at least when we have no background of the rest). Then it literally pops up.

[pizzapanni]

TIL the method stopPropagation() and it was super useful!

[blackpurple]

Yep this is the best pop-up component ever that I can finally code myself without coming back to the video, and it animates on it's way in

The only thing I want to ask is if it would be wise to use named slot when putting in content, like does name in the named slot need to be unique like id or can it be commonly shared as well, and whether there's any point in using named slot at all, I'm new to Svelte and so far I'm liking it over react

[tristynspies]

Awesome video thanks James. You really have helped me learn Svelte/Sveltekit. Keep up the good work.

[javiersilva]

what is the vs code theme? It's really cool

[doubleja]

I often find it useful to place boolean logic inside my tailwind classes, instead of using svelte if/key blocks. Pros: can keep state (if/key block destroys the component); Cons: cannot use/re-trigger svelte's transitions.

In particular I use a layout-level, navbar-initiated(?) modal in which a user can upload a file (I'm using dropzonejs), close the modal, have the upload complete, and reopen to see a history of uploaded items.

Also I implement my modal logic a bit differently ... anybody chime in if you think this can be improved:

--- inside Modal.svelte ---
<script>
export let showModal = false
</script>

<button
on:click | self={ ()=> (showModal = false) }
class="z-50 fixed w-full h-full grid place-items-center {showModal ? `bg-[rgba(0, 0, 0, 0.4)]`: 'hidden'}"
>
<slot />
</button>


--- inside +layout.svelte ---
<Modal
~~ some content ~~
<Modal/>

[gvarph]

Great video.
Just one quick question: How did you get errors to show up inline in vscode?

[paulh]

James, will the Svelte Course be in js or ts? also will it including debugging w/ chrome or some other tool?

[DamonMedekMusic]

In Tailwind/Svelte I use... let twModalContainer = "bg-red-900 etc etc etc" then in the html I use a js expression like <div class="{twModalContainer}"> It makes my html code very clean. I just wrap my tw variables in //STYLE comments.

[moomoocow]

how do you get the colors to show up next to the color classes when creating components?

[mavdotj]

6:51 for quicker typing you can set the variable with an equal sign but put a $ before the var name

[raz]

Spent hours doing the same yesterday and then this video suddenly pops up