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.