Styling a Radix Dialog with Tailwind CSS

Learn how to use Tailwind CSS to style a Radix UI Dialog component to match the look and feel of our app!

This is Part 1 of a series in collaboration with WorkOS.
Part 1: Styling a Radix Dialog with Tailwind CSS

🔗 LINKS

🕐 TIMESTAMPS
0:00 – Intro
0:30 – Rendering a Dialog
2:35 – Basic modal styling
3:31 – Rendering an Overlay
4:52 – Adding a form
8:25 – Wiring up Close buttons
9:23 – Rendering a Title
10:35 – Outro

[jimshtepa]

Thank you for this quick overview. I hope your partnership with workos lasts long enough to covere 80-90% of the primitives😁

[EnesKab]

This is my first time here, and just exploring radix. These tutorials are rare find. So right into the point, super clear and easy to follow in a very right pace. Thank you Sam.

[rapid-ruby]

Wow, Radix looks like an awesome library, really cool that it doesn't inject any styles as well! Thanks for sharing!

[timothyn]

wow, I've messed just a tiny bit with radix-ui but you're helping really drive the value/purpose of it

I admire your UI skills, it's my kryptonite atm, but you make it looks so easy! The step by step approach makes it look more manageable. Thanks for the share!

[ebratz]

great Radix content! Thank you so much for producing such high quality content for free!

[subeg]

You are VS Code shortcut wizard. Can you do a video on VS Code shortcuts and snippets?

[AhmadAwais]

What a fantastic video, Sam. I kept hoping you would touch on the dialog title part which is not always obvious as it has a11y utility. Thank you! 🙌

[pheisar]

Another great video! You are killing it! Thanks!

[chrismixlist]

Always providing high quality and informative videos. Keep up the great work

[xberna]

these types of videos are very helpful! thx

[azazahamed]

Such a great overview about Radix and their dialog component! Instant sub!

[plvzpdz]

Excellent work! Tutorial pace is right on the money and design is simple but elegant.

[EvertJunior]

You really are the best. Thank you for another excellent video.

[angstrom]

10 lines of code, but you have to know what 10 lines. It always pays to know what you are doing. Thanks for this!

[nonchain]

This is awesome. I can even create my own Design System

[alejandrobanderas]

Thank you! You are making some really good content!

[coder-twadd]

This is fire btw. Thanks for this video!

[cecece]

A real thank you, i've learned a lot in only 10 minutes

Such a professional video. Subscribed immediately.

[maskman]

This is so practical and useful, thank you for the tutorial 🙏