Check out my latest project called Rails UI 🎨

June 9, 2019

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

Leave a reply

Sign in or Sign up to leave a response.

1 response

Icons/flag
Icons/link diagonal

Attention:

Are you looking for a REAL FINANCIAL LOAN COMPANY to give you loan between 50,000 Euro and 50,000,000 Euro (for a business or company loan, personal loan, home loans, car loan, debt consolidation loans, venture capital, healthcare loan, etc.)
Or have you been denied a loan from a bank or financial institution because of one reason or the other?
Apply now and get real financial loan processed and approved within 3 days.
MARK DAVSON FINANCIAL LOAN FIRM, we are an "Internationally Accredited Loan Lender" that give REAL FINANCIAL LOANS to individuals and companies in a low interest rate of 2% with your valid identity card or your country international passport for verification.
Our loan Repayment starts 1 (One) year after you have received your loan, and repayment duration ranges from between 3 to 35 years duration.
Our company also need a person that can be our company representative in your country.

FOR IMMEDIATE RESPONSE AND PROCESSING OF YOUR LOAN REQUEST WITHIN 2 WORKING DAYS,
Contact us directly through this email: [email protected]

Contact us with the following information:

Full Name:____________________________
Amount Needed as Loan:________________
Loan Duration:_________________________
Purpose for Loan:______________________
Date of Birth:___________________________
Gender:_______________________________
Marital status:__________________________
Contact Address:_______________________
City/Zip code:__________________________
Country:_______________________________
Occupation:____________________________
Mobile Phone:__________________________

Send your request for immediate response to: [email protected]

Thank you
C.E.O. Rev. Mark Davson
MARK DAVSON FINANCIAL LOAN FIRM
United Kingdom, England (UK)
Email:[email protected]
Email: [email protected]
Email: [email protected]
WhatsApp:+447404320361

Est. reading time: 1 minutes
Stats: 34,884 views

Collection

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