Vue / Vite / tailwind advanced html starter

After finding a solid basic tailwind starter on stackblitz (github repository), I go on further creative stuff.

template requirements

this template is a vue / vite / Tailwind responsive website with top navigation hierarchical menu : a good start for developing most web sites.

First thing is to fork the starter to start working on stackblitz. You can then create a new page, and integrate the new page in the menu. This is done via three simple steps. I know it sounds a lot, but it's necessary on this minimal setup. More complete setup would involve Nuxt and its routing features, or Next and its routing feature if you wrok with react , but we want to keep this demo project light enough.

  • in src : create Video.vue component
  • routes.js : add { path: '/video', component: Video, meta: { title: 'Video' } }, to routes array, don't forget to import Video from './views/Video.vue'
  • in App.vue add { text: 'Videos', to: '/video' }, to links array

in this first work we created a full width / full screen height video display with centered text. For centering the text vertically we use flex class combined with items-center, as demonstrated on this playground example.

To top