title: Overriding Tailwind CSS Classes in a Reusable VueJS Component
body: <p>I have created a VueJS button component using TailwindCSS.  My goal is to provide that button component with some base styles (using tailwindcss classes), with the option to override them when need be (again, using tailwind css classes).</p>
  <p>For example, here is a simplified version of the <code>Button</code> component:</p>
  <pre><code>// Button.vue
  
  &lt;template&gt;
    &lt;button class=&quot;bg-green-500 text-white py-2 px-4 rounded&quot;&gt;
      Click Me
    &lt;/button&gt;
  &lt;/template&gt;
  </code></pre>
  <p>And here is an example of my using that component in another file:</p>
  <pre><code>// index.vue
  
  &lt;Button&gt;&lt;/Button&gt;
  &lt;Button class=&quot;bg-red-600&quot;&gt;&lt;/Button&gt;
  &lt;Button class=&quot;bg-blue-600&quot;&gt;&lt;/Button&gt;
  </code></pre>
  <p>The problem is that this only half-works.  That is to say, <code>bg-blue-600</code> does override the <code>bg-green-500</code> that I set up as a default in <code>Button.vue</code>.  But <code>bg-red-600</code> does <strong>not</strong> override the background color (presumbably, because <code>bg-red-600</code> comes earlier in the css source code.</p>
  <p>As such, I am wondering how can I properly set this up?  That is to say, how can I give the <code>Button</code> component some base styles (again, using tailwind css classes) while also providing the option to override those styles using tailwind css classes.</p>
  <p>Thanks.</p>