title: How do I use CSS as a prop for a Vuetify v-tab?
body: <p>I am trying to change my website to make color palette swapping easier, as we are still trying to find colors that work still. We are using Vue and Vuetify with SCSS generating our main CSS file. We are using almost exclusively Vue SFCs. I am currently stumped by a <a href="https://vuetifyjs.com/en/components/tabs" rel="nofollow noreferrer">V-Tab</a> issue where the "active" bar underneath won't change color.</p>
  
  <p>The main issue is that, when using Vuetify components, in-file CSS has little impact. When I pass <code>color="#ffffff"</code> as a prop, it works wonderfully, everything is great. However, I cannot use CSS to change the colors in the same way at all (the produced code actually has the bar in a different <code>div</code> <em>outside</em> of the tab element).  </p>
  
  <ul>
  <li>I have tried overwriting the <code>v-tabs-slider-wrapper</code> element style every which way I could think of, to no avail</li>
  <li>I have tried using SCSS functions inside the <code>computed</code> section of the SFC</li>
  <li>I have tried basic CSS and SCSS</li>
  <li>I have tried <code>v-bind</code>ing the <code>color</code> attribute to a computed function that referenced the SCSS function</li>
  <li>I have tried using classes, ids, names, etc.</li>
  <li>I tried <code>background-color</code> in all iterations as well, as a hope</li>
  </ul>
  
  <p>If any one can help me, I'd appreciate it.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-tabs class="tabs"&gt;
      &lt;v-tab&gt;Thing&lt;/v-tab&gt;
      &lt;v-tab-item&gt;Inner Thing&lt;/v-tab-item&gt;
    &lt;/v-tabs&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default { };
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  @import "../styles/main.scss";
  
  .tabs div {// this was the only way to get the tab **text** to change, doesn't work for the slider bar
    color: getColor_fromText("color"); //defined in main.scss
  }
  &lt;/style&gt;
  </code></pre>