Vue: adding style to app overrides styles of child components - vue.js

Question

I have this simple page, designed with Vue and Tailwind:
App.vue:
<template>
<!-- <div class="bg-blue-500 flex flex-col h-screen min-h-screen " id="app">-->
<div id = "app" class = "bg-blue-500 flex flex-col h-screen min-h-screen app">
<Header/>
<main id ="app-main">
<p>app</p>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</main>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header, Footer
}
}
</script>
<style>
#app {
}
#app-main {
display: flex;
flex: 1 1 0%;
}
</style>
However if I edit #app style:
#app {
background-color: purple;
}
So as can be seen, when Tailwind is used, the styling behaves as expected: everything outside header and footer is blue, header and footer - their respective colors. However an attempt to set a color in the <style> tag, results in #app's background color overriding those of header and footer.
How do I fix it? How do people deal with it, when they don't use Tailwind?

Answer 1

If I understood you correctly, you are trying to change the color of the blue app region.
Notice the class bg-blue-500 on #app element? That's the class controlling the element's background color.
I can't check it but I bet renaming it to bh-purple-500 will color the background purple. You can find more default colors in the docs.
They way you're doing it overrides the styles of the child elements.