title: Tailwind classes not reflecting on heading elements
body: <p>I made a react functional component called <code>Heading</code>. This is the code:</p>
  <pre><code>function Heading({
    color = &quot;white&quot;,
    tag = &quot;h1&quot;,
    text,
    fontSize = &quot;6xl&quot;,
    margin = &quot;&quot;,
    fontWeight = &quot;normal&quot;,
  }: Props): Element&lt;any&gt; {
    const Tag = tag;
    return (
      &lt;Tag
        className={`text-${color} text-${fontSize} ${margin} font-${fontWeight}`}
      &gt;&lt;/Tag&gt;
    );
  }
  </code></pre>
  <p>I think it's pretty straightforward, it even renders the correct HTML: <code>&lt;h1 class=&quot;text-black text-6xl mb-5 font-normal&quot;&gt;Dashboard&lt;/h1&gt;</code></p>
  <p>But it still doesn't reflect the changes. I understand that the heading tag styling gets reset because of <a href="https://tailwindcss.com/docs/preflight" rel="nofollow noreferrer">preflight</a>, but doesn't it get overridden when I apply the utility classes?</p>
  <p>This is my <code>tailwind.config.js</code>:</p>
  <pre><code>module.exports = {
    content: [
      &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,
    ],
    theme: {
      extend: {
        colors: {
          primary: &quot;#497BFA&quot;,
        },
      },
    },
    plugins: [],
  };
  </code></pre>