Lets Build With Tailwind CSS - Responsive Navbar

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

Welcome to another addition to my Let's Build: With Tailwind CSS series. This installment will focus on using PostCSS in a local development environment to create and configure a responsive navbar built entirely with Tailwind CSS.

Unlike previous tutorials where I hosted code on Codepen, this tutorial will reference a playground Github repo (https://github.com/tailwindcss/playground) from Adam Wathan which uses PostCSS and a few other dependencies to allow for complete control of the Tailwind CSS framework. We'll start off with the default theme but work to extend this in future installments.

Post CSS combined with autoprefixer allows us to create a build process that generates the utility classes provided by the Tailwind CSS framework. With these, I take a stab at creating a CSS-only responsive navbar that toggles state on mobile devices. We'll harness a checkbox to create the dropdown effect that would otherwise be more suitable for JavaScript.

The navbar was built entirely with Tailwind except for a single selector that goes beyond the scope of the framework. Overall I'm very pleased with the results.

Find the finalized code here: https://github.com/justalever/tailwind-navbar.

====================

📰 Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💎🛤 NEW COURSE: HELLO RAILS - Get notified https://hellorails.io

💻 Previously published at: https://web-crunch.com/lets-build-tailwind-css-responsive-navbar

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ Or buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=025OldWcmbQ