Responsive Side Navigation with Tailwind CSS and Alpine JS

In this video, we use Tailwind CSS and Alpine JS to build a responsive side navigation that is fixed on larger screens, but collapsible on smaller screens.
Github Repository: github.com/Thi...
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...
#tailwindcss #alpinejs #sidenav #responsive

[@hectorbritodiaz9760]

Tus videos, son los que siempre me ayudan. Gracias. TAILWIND RULES!!

[@Thirus]

I only understood “thank you” from your comment 😊 So you’re welcome!

[@rezaanwar7851]

Great tutorial! Been putting off learning Tailwind until now. Thx! :)

[@Thirus]

Tailwind is a game changer!

[@gaton313]

Thanks for this tutorial. Looking forward to the full tutorial on Alpinejs 😍

[@alexwakeup7098]

Thanks to you my sidebar is working as expected! thank you for putting the repository on the description!

[@Thirus]

Very happy to know it helped 😊

[@patlecat]

Great tutorial, hope you will make more on tailwindcss and alpinejs in particular.

[@Thirus]

Made a few more. Hope you checked my other videos. Will make more too, thank you! 😊

[@patlecat]

@@Thirus Some, but I am specifically interested in those topics currently. Thanks again.

[@mrprashant8144]

Great, i learned something new.... Subscribed

[@Thirus]

Nice, thank you

[@sreekar_s]

Great video as always 😊 Just a nitpick, it would be great if you don't disable outline for buttons as it causes accessibility issues. I know that this video's focused on design. I just wanted to put this out for other viewers to make a note of this. Thank you🙏

[@Thirus]

I removed outline but added background. But yes, you’re right

[@lutzgerken9634]

Thank you very much. Your tutorials are very good. More of that, please.

[@Thirus]

Sure, thank you 😊

[@thamibn]

Nice tutorial can you please do a video showing us how we can make the side bar and top header to be fixed wen scrolling

[@J90JAM]

Your videos are always super helpful, keep them coming 👌

[@Thirus]

Sure, thank you 😊

[@jamesbest2221]

Fantastic! This was so helpful, thank you!

[@Thirus]

Happy to hear that :)

[@rohanshah7960]

This was really great, and explained very well, most importantly a simple tutorial. I didn't know about your KZbin channel until Brad Traversy mentioned about it on Twitter, since then I've watched many of your videos, and boy they are so good, yet underrated. You're a big reason why I learnt TailwindCSS in the first place. I just had a suggestion: Could you also include dark styles for dark mode in your tutorials? Anyways Thank You for this 🤩🤩

[@Thirus]

Wow! Thanks for the amazing words of appreciation 😊 I have a separate video for switching between dark and light mode. In my opinion, including it in every video will increase the duration and overwhelms the viewer with more concepts. But I’ll consider your feedback and try to include where it fits

[@HeyNoah]

Super cool! Great tutorial, thank you!

[@Thirus]

You’re welcome :)

[@pratikkeni]

That was really good. Also do you suggest learning React or WordPress in this current situation ?

[@Thirus]

They are two very different things, depends on your end goal. DM me on Twitter to talk further

[@starlays9727]

Great! Thank you.

[@Thirus]

You’re welcome

[@vivekpaliwar7217]

this is what i need yay :)

[@vivekpaliwar7217]

Is it possible when the sidebar in mobile version then I click the sidebar item like about us and collapse sidebar .

[@Bukratusi]

when i add lg it works for only that screen size but not for all screen sized bigger than that. what to do?

[@Thirus]

That doesn’t happen. May be some other classes are affecting the behaviour

[@stephenlau2845]

Excellence Tutorial, Thank You So Much....!

[@Thirus]

You’re welcome 😊

[@gessegoncalves6493]

Great

[@BilalSatellite]

Thanks

[@Thirus]

You’re welcome!

[@rangabharath4253]

Awesome as always 👍😀

[@Thirus]

Thank you 😊

[@hansdampf10]

Great Tutorial. You have a typo in your thumbnail.

[@Thirus]

Oh right! Thanks for pointing out

[@danangponorogo166]

Hi , this is a great tutorial , however it would be perfect if you were willing to add a tutorial on how to create smooth transition sub menu within your side navigation ..

[@iamaakashbasnet]

Thanks for the tutorial! 😊

[@Thirus]

You're welcome 😊

[@shashiupadhaya6703]

I had problem my css is not working on live server. can you help me?

[@Thirus]

Sure. Send me a DM on Twitter @shrutibalasa with some more details.

[@JohnCosly]

Very helpful!

[@Thirus]

Glad it was helpful! :)

[@juneddhanga3257]

Great! But I've one question at this moment when you resize the browser window then sidebar style is quite disturbing so how could we avoid the same

[@Thirus]

You mean, on larger screens, you don’t want the sidebar to appear the way it is? Then just remove all the classes with prefix ‘lg:’ - you will have the same behaviour for all screen sizes then

[@stephenlau2845]

Yes, How to build a carousel with 3 images and they play Automatically use Alpine.js ? Thanks again....

[@Thirus]

Will see if I can create a CodePen for this

[@stephenlau2845]

@@Thirus Thank You Very Much....

[@AmitDas-yb3re]

Great video. Easy to follow. Subscribe. One question how to purge past used classes that are not used anymore?

[@Thirus]

Stop the current script and build again, the unused classes will be gone.

[@AmitDas-yb3re]

@@Thirus Thanks.

[@PcHabitat]

Hi, I was wondering, when the sidebar is open on smaller break points how can I make the rest of the screen dark like when opening a modal? I added a modal to this project you made, I think the z index may have messed up the lower portion of the side bar almost as if bleeded into the back ground so I added overflow-y-auto and that seemed to do the trick

[@Thirus]

Are you saying you found the solution?

[@PcHabitat]

@@Thirus Not really to be honest, unless I add overflow-y-auto it still bleeds into the rest of the content. I wish I could upload a screenshot

[@Thirus]

Could you DM on Twitter? twitter.com/shrutibalasa

[@slayer5171]

How to set sidebar and navigation to fixed position but the content is scrollable?

[@Thirus]

Have you tried adding overflow-y: scroll to the sidebar? DM me on Twitter @shrutibalasa if you need more help

[@shayakdey6787]

Please make a video how to use tailwind css with sass..... I've been trying this for months....

[@kirantpatil123]

Hi, Do you have an rails example with alpinejs ?

[@Thirus]

Sorry, I don’t use Rails

[@adisakjantrasopark7672]

thank you so much :)

[@Thirus]

You’re welcome!

[@nirmalthomas8838]

there is error when i apply npm run dev

[@Thirus]

What exactly is the error? DM me on Twitter if needed

[@neerajsinghtangariya2587]

Yes alpine is great for such these thing... that's the reason i ❤️ alpine... Ma'am i have one doubt...what does translate...and uses of this...?

[@Thirus]

Uses of translate is it? It is a CSS property used to move elements in x or y direction - mainly used for such animations

[@mukuljain8383]

Make a video on how to install tailwind/jit with create react app please

[@Thirus]

Follow the same steps here - kzbin.info/www/bejne/nafOn3SkisypacU And then, in the tailwind.config.js, add this line before "purge" option mode: 'jit',

[@mukuljain8383]

@@Thirus thank you you are the best ❤️

[@shocchosolutions6275]

Explain alpine store

[@robotprogrammer2902]

:)

[@robotprogrammer2902]

:(