title: why don't tailwind override locally defined style?
body: <p>I am trying to change the default color of text by a tailwindcss stye. But I cant understood why it's not working. But Bootstrap does override the default style.</p>
  <p>I am just new in tailwindcss. Can somebody tell me whats happening here?</p>
  <p><a href="https://codesandbox.io/s/vue-template-82b4b?file=/src/components/HelloWorld.vue" rel="noreferrer">Here you can editd in codesandbox</a></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;hello&quot;&gt;
      &lt;h1 class=&quot;origintxt text-green-400&quot;&gt;{{ msg }}&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;HelloWorld&quot;,
    props: {
      msg: String
    }
  };
  &lt;/script&gt;
  
  
  &lt;style scoped&gt;
  
  .origintxt {
    color: black;
  }
  
  &lt;/style&gt;
  </code></pre>