Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

June 9, 2019

Last updated November 5, 2023

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

Link this article
Est. reading time: 1 minutes
Stats: 36,523 views

Collection

Part of the Let's Build: With Tailwind CSS collection