title: Tailwind css border color not working on web page
body: <p>I am just trying with tailwindcss, I got stuck at very basic thing. I tried different tailwindcss's utility classed and it worked. But now I am stuck at border-color</p>
  
  <pre><code>&lt;div className="px-4 border-gray-900 border-solid"&gt;
     &lt;a href="#" className="block font-semibold"&gt;Menu1&lt;/a&gt;
     &lt;a href="#" className="block "&gt;Menu2&lt;/a&gt;
     &lt;a href="#" className="block "&gt;Menu3&lt;/a&gt;
     &lt;a href="#" className="block "&gt;Login&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can inspect the elements and it is crossed in inspect element which means somehow it is not being applied to dom.</p>
  
  <pre><code>module.exports = {
    purge: [],
    theme: {
      extend: {
        colors: {
          primary: 'var(--color-primary)',
          secondary: 'var(--color-secondary)',
          negative: 'var(--color-negative)',
          positive: 'var(--color-positive)',
          'primary-background': 'var(--background-primary)',
          'sec-background': 'var(--background-sec)',
          'primary-text': 'var(--color-text-primary)',
        },
      },
      backgroundColor: (theme) =&gt; ({
        ...theme('colors'),
      }),
      borderColor: (theme) =&gt; ({
        ...theme('colors'),
      }),
    },
    variants: {
      backgroundColor: ['active'],
      borderStyle: ['responsive'],
    },
    plugins: [],
  };
  </code></pre>
  
  <p>This is how my tailwind.config.js looks like</p>
  
  <p>Attaching an image <a href="https://i.stack.imgur.com/TTst8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TTst8.png" alt="enter image description here"></a></p>