├── .gitignore ├── README.md ├── index.html ├── main.js ├── package.json ├── postcss.config.cjs ├── public └── vite.svg ├── style.css ├── tailwind.config.cjs └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |  2 | 3 | # Code a mega menu with Tailwind CSS 4 | 5 | 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. 6 | 7 | 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. 8 | 9 | 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. 10 | 11 | 📕 [Read the full guide](https://web-crunch.com/posts/code-a-mega-menu-with-tailwind-css) 12 | 13 | 📺 [Watch the video tutorial](https://youtu.be/Y7i4ygh1wYw) 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |