Tailwind CSS mega menu tutorial

webcrunch
webcrunch
12.7 هزار بار بازدید - 2 سال پیش - If you are an avid
If you are an avid Tailwind CSS user like myself, you probably landed here to learn how to make better use of Tailwind CSS for a more complex solution like a mega navigation menu.

I was inspired by Stripe's navigation, so part of this guide is stealing some inspiration from them. We'll need to leverage Tailwind CSS to make this all work, as well as some JavaScript.

To make my and your life easier, I'm reaching for the Vite JS. Think of Vite as a progressive front-end stack ready to use and less complex than something like Webpack. I'll often use this on static sites just or more front-end-focused apps.

📕 Read the written guide here: https://web-crunch.com/posts/code-a-m...

⚙️ Code for this project: https://github.com/justalever/tailwin...

Timestamps:

00:00 - Intro
02:03 - Vite.js
02:45 - Create a new project
04:20 - Installing and configuring Tailwind CSS
08:38 - Scaffold HTML and Start styling menu
======

Hi, My name is Andy Leverenz, and I work as a product designer and developer. 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.

♥️ Sponsor me on GitHub
https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee
https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe:
https://www.youtube.com/user/webcrunc...

💻 Previously published at:
https://web-crunch.com/posts/code-a-m...

💎Ruby on Rails Course: HELLO RAILS
https://hellorails.io

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

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

🚀 Links:
Weekly Newsletter: https://digest.web-crunch.com/
Twitter: Twitter: webcrunchblog
Github: https://github.com/justalever

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

📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/products/ptt
2 سال پیش در تاریخ 1401/05/12 منتشر شده است.
12,774 بـار بازدید شده
... بیشتر