Vue: adding style to app overrides styles of child components

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.