Tailwind responsive menu with drop down

started working with tailwind css, at first it really seemed impossible to code responsive menu with hierarchy in nuxtjs. NextJs has lots of nice template but nuxt seems behind , cruip sells templates for vue but not for nuxt 3, not yet though , and I finally found a nuxt2 template , which has been out there for more than 2 years (github). Quick research on available tailwind snippets brought no more than partial answers.

therefore i decide to rewrite all from scratch. here is the process, and you can download the first version of a NUXT3 tailwind template on github

pnpm dlx nuxi@latest init nuxtwavetailwind

note : on default nuxt install when I generate I get a strange error, solution here : pnpm add unstorage, still generates warnings but does generate

Error: Could not load /opt/homebrew/lib/node_modules/@nuxt/devtools/node_modules/unstorage/drivers/fs-lite.mjs

next command : npx nuxi@latest module add tailwindcss

then npx tailwindcss init

then pnpm i -D aos, etc...


  • WaveIcon.vue custom component for minimal set of icons : after trying serveral nuxt modules for icons (icons-tw and nuxt-mdi), I encountered many problems (vite problems for the first one and html rendering issues for the second one) and decided to write my own component, taking svg from heroicon website
  • Aos animations : Aos is a good library for starting to play with html element animations, but again as above I had to stay away from the official nuxt aos implementation and use my own plugin definition


  • introducing page mode : full ( overlapping transparent fixed menu) or pad ( standard fixed menu, opaque)


alternatives to my tailwind starter can be found on https://nuxt.com/templates

Leave a Comment

Your email address will not be published. Required fields are marked *

To top