How to show components in Tailwind? - css

Question

I need to create a website using Tailwind and Vue.js The components such as the appheader, the appfooter, search bar, filtercontainer ect will be in different files. The problem is that I do not know how to make the connection between them so they all show. Right now I can show the app header, app footer and search bar but cannot show the filter container. The code is below:
App.vue
<div id="app" class="bg-gray-200 font-sans flex flex-col min-h-screen">
<AppHeader />
<router-view class="flex-grow"></router-view>
<AppFooter />
</div>
</template>
<script>
import AppHeader from './components/layout/AppHeader';
import AppFooter from './components/layout/AppFooter';
export default {
name: 'app',
watch: {
'$route' (to) {
document.title = to.meta.title || 'Logzor'
}
},
components: {
AppHeader,
AppFooter
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>
AppHeader.vue
<header>
<nav class="font-sans flex flex-col text-center content-center sm:flex-row sm:text-left sm:justify-between py-2 px-6 bg-white shadow sm:items-baseline w-full">
<div class="mb-2 sm:mb-0 flex flex-row
">
<div class="h-10 w-10 self-center mr-2">
<img class="h-10 w-10 self-center" src="https://csscomps.com/images/csscomps.png" />
</div>
<div>
Log<br>
<span class="text-xs text-grey-dark">Log files</span>
</div>
</div>
<div class="sm:mb-0 self-center">
<!-- <div class="h-10" style="display: table-cell, vertical-align: middle;"> -->
Link1
Link2
<!-- About Us -->
Link3
<!-- </div> -->
</div>
</nav>
</header>
</template>
<style>
</style>
SearchBar.vue
<template>
<!-- Searchbar -->
<div class="flex w-full">
<input type="text" v-model="search.search" class="h-16 appearance-none rounded-l w-full py-2 px-2 ml-2 text-gray-700 leading-tight focus:outline-none text-2xl" id="search" placeholder="Search...">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-r "> SEARCH </button>
</div>
</template>
<script>
export default {
props: [
'search',
],
data() {
return {
}
},
methods: {
},
watch: {
value() {
this.$emit('collectSearch', this.search)
}
}
}
</script>
<style scoped>
</style>
FilterContainer.vue
<template>
<div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal">
<p class="text-base font-bold py-2 lg:pb-6 text-gray-700">Menu</p>
<div class="block lg:hidden sticky inset-0">
<button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none">
<svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</button>
</div>
<div class="w-full sticky inset-0 hidden h-64 lg:h-auto overflow-x-hidden overflow-y-auto lg:overflow-y-hidden lg:block mt-0 border border-gray-400 lg:border-transparent bg-white shadow lg:shadow-none lg:bg-transparent z-20" style="top:5em;" id="menu-content">
<ul class="list-reset">
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:border-purple-500 lg:hover:border-purple-500">
<span class="pb-1 md:pb-0 text-sm text-gray-900 font-bold">Home</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Tasks</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Messages</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Analytics</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Payments</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>