Lets Build: With Tailwind CSS - Responsive Navbar

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 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.

The Series so far

• How to Install Tailwind CSS v1.0
• Let’s Build: With Tailwind CSS – Tweet
• Let's Build: With Tailwind CSS - Dribbble Shot
• Let's Build: With Tailwind CSS - Responsive Navbar