title: Design system: styles override using TailwindCSS
body: <p>I am trying to create a Design System using ReactJS and TailwindCSS.</p>
  <p>I created a default <code>Button</code> component with basic styling as follow:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import classNames from &quot;classnames&quot;;
  
  const Button = React.forwardRef(
    ({ children, className = &quot;&quot;, onClick }, ref) =&gt; {
      const buttonClasses = classNames(
        className,
        &quot;w-24 py-3 bg-red-500 text-white font-bold rounded-full&quot;
      );
  
      const commonProps = {
        className: buttonClasses,
        onClick,
        ref
      };
  
      return React.createElement(
        &quot;button&quot;,
        { ...commonProps, type: &quot;button&quot; },
        children
      );
    }
  );
  
  export default Button;
  </code></pre>
  <p>I then use the <code>Button</code> in my page like:</p>
  <pre class="lang-js prettyprint-override"><code>import Button from &quot;../src/components/Button&quot;;
  
  export default function IndexPage() {
    return (
      &lt;div&gt;
        &lt;Button onClick={() =&gt; console.log(&quot;TODO&quot;)}&gt;Vanilla Button&lt;/Button&gt;
        &lt;div className=&quot;h-2&quot; /&gt;
        &lt;Button
          className=&quot;w-6 py-2 bg-blue-500 rounded-sm&quot;
          onClick={() =&gt; console.log(&quot;TODO&quot;)}
        &gt;
          Custom Button
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>This is what is displayed:</p>
  <p><a href="https://i.stack.imgur.com/MxCh0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MxCh0.png" alt="preview" /></a></p>
  <p>Some attributes are overridden like the <code>background-color</code> but some aren't (the rest).</p>
  <p>The reason is the classes provided by TailwindCSS are written in an order where <code>bg-blue-500</code> is placed after <code>bg-red-500</code>, therefore overriding it. On the other hand, the other classes provided in the custom button are written before the classes on the base button, therefore not overriding the styles.</p>
  <p>This behavior is happening with TailwindCSS but might occurs with any other styling approach as far as the class order can produce this scenario.</p>
  <p>Do you have any workaround / solution to enable this kind of customisation?</p>
  <p>Here is a full <a href="https://codesandbox.io/s/serene-kirch-w5ycp?file=/pages/index.js" rel="noreferrer">CodeSanbox</a> if needed.</p>