Responsive Side Navigation with Tailwind CSS and Alpine JS
HTML-код
- Опубликовано: 30 апр 2021
- 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/ThirusOfficial/sid...
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibalasa.com
#tailwindcss #alpinejs #sidenav #responsive 
Наука
Tus videos, son los que siempre me ayudan. Gracias. TAILWIND RULES!!
I only understood “thank you” from your comment 😊 So you’re welcome!
Thanks for this tutorial. Looking forward to the full tutorial on Alpinejs 😍
Thanks to you my sidebar is working as expected! thank you for putting the repository on the description!
Very happy to know it helped 😊
Great tutorial! Been putting off learning Tailwind until now. Thx! :)
Tailwind is a game changer!
Your videos are always super helpful, keep them coming 👌
Sure, thank you 😊
Thank you very much. Your tutorials are very good. More of that, please.
Sure, thank you 😊
Fantastic! This was so helpful, thank you!
Happy to hear that :)
Great, i learned something new.... Subscribed
Nice, thank you
This was really great, and explained very well, most importantly a simple tutorial. I didn't know about your RUclips 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 🤩🤩
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
Super cool! Great tutorial, thank you!
You’re welcome :)
Great tutorial, hope you will make more on tailwindcss and alpinejs in particular.
Made a few more. Hope you checked my other videos. Will make more too, thank you! 😊
@@Thirus Some, but I am specifically interested in those topics currently. Thanks again.
Awesome as always 👍😀
Thank you 😊
Thanks for the tutorial! 😊
You're welcome 😊
Excellence Tutorial, Thank You So Much....!
You’re welcome 😊
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
Great! Thank you.
You’re welcome
Very helpful!
Glad it was helpful! :)
this is what i need yay :)
Is it possible when the sidebar in mobile version then I click the sidebar item like about us and collapse sidebar .
That was really good. Also do you suggest learning React or WordPress in this current situation ?
They are two very different things, depends on your end goal. DM me on Twitter to talk further
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 ..
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🙏
I removed outline but added background. But yes, you’re right
Great
Great video. Easy to follow. Subscribe. One question how to purge past used classes that are not used anymore?
Stop the current script and build again, the unused classes will be gone.
@@Thirus Thanks.
thank you so much :)
You’re welcome!
Thanks
You’re welcome!
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
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
when i add lg it works for only that screen size but not for all screen sized bigger than that. what to do?
That doesn’t happen. May be some other classes are affecting the behaviour
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
Are you saying you found the solution?
@@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
Could you DM on Twitter? twitter.com/shrutibalasa
Great Tutorial. You have a typo in your thumbnail.
Oh right! Thanks for pointing out
Hi, Do you have an rails example with alpinejs ?
Sorry, I don’t use Rails
I had problem my css is not working on live server. can you help me?
Sure. Send me a DM on Twitter @shrutibalasa with some more details.
Please make a video how to use tailwind css with sass..... I've been trying this for months....
How to set sidebar and navigation to fixed position but the content is scrollable?
Have you tried adding overflow-y: scroll to the sidebar? DM me on Twitter @shrutibalasa if you need more help
there is error when i apply npm run dev
What exactly is the error? DM me on Twitter if needed
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...?
Uses of translate is it? It is a CSS property used to move elements in x or y direction - mainly used for such animations
Yes, How to build a carousel with 3 images and they play Automatically use Alpine.js ? Thanks again....
Will see if I can create a CodePen for this
@@Thirus Thank You Very Much....
Make a video on how to install tailwind/jit with create react app please
Follow the same steps here - ruclips.net/video/gvknAnUgv3c/видео.html
And then, in the tailwind.config.js, add this line before "purge" option
mode: 'jit',
@@Thirus thank you you are the best ❤️
:)
Explain alpine store
:(