title: Tailwind CSS font size works, but margins and borders don't. Did I install it incorrectly?
body: <p>I am trying to style my webpage using tailwind css -- the whole thing. But my immediate goal is to style some text on some inputs and buttons using borders. This is where I discovered that my Tailwind is configured wrong.</p>
  <p>Because the way that this &quot;doesn't work&quot; is quite vague its difficult to diagnose with Googling. I found one result that suggested adding <code>border</code> because without a <code>border</code> the code <code>border-black</code> has no <code>border</code> to apply itself to. But I did that and nothing changed. Additionally I can <em>see</em> that in the browser, there is no margin being added.</p>
  <p>I expect that the following code should give a margin and black border to my button. It does not.</p>
  <pre><code>function Button({ label, action }) {
      return (
          &lt;button
              className=&quot;border-2 border-black mt-3 text-2xl&quot;
              onClick={() =&gt; {
                  action();
              }}
          &gt;
              {label}
          &lt;/button&gt;
      );
  }
  
  export default Button;
  </code></pre>
  <p>Here is the code as it is present in my browser: <code>&lt;button class=&quot;border-2 border-black mt-3 text-2xl&quot;&gt;Next&lt;/button&gt;</code> so we know the stylings have reached the button.</p>
  <p>Additionally I see that the fonts have updated since I added Tailwind CSS (because tailwind overrides default font styling with its own), <strong>and</strong> the following styling <strong>does</strong> work:</p>
  <p><code>&lt;h2 className=&quot;text-2xl&quot;&gt;Foo&lt;/h2&gt; // the text is actually bigger, confirming that tailwind css is applying something</code></p>
  <p>Is there something I have to configure to make Tailwind reach my code?</p>
  <p>Here is <code>tailwind.config.js</code> in its default state, sitting in the parent directory alongside <code>/src</code>:</p>
  <pre><code>module.exports = {
      content: [&quot;./src/**/*.{html,js}&quot;],
      theme: {
          extend: {}
      },
      plugins: []
  };
  
  </code></pre>
  <p>Running <code>npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch</code> doesn't help either <strong>and</strong> I do have <code>&lt;link href=&quot;/dist/output.css&quot; rel=&quot;stylesheet&quot;&gt;</code> in my <code>index.html</code> file <a href="https://tailwindcss.com/docs/installation" rel="nofollow noreferrer">the way its described in the docs</a></p>
  <p><code>package.json</code> because I presume someone will ask:</p>
  <pre><code>{
    &quot;name&quot;: &quot;westland&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^13.3.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;react&quot;: &quot;^18.2.0&quot;,
      &quot;react-dom&quot;: &quot;^18.2.0&quot;,
      &quot;react-router-dom&quot;: &quot;^6.3.0&quot;,
      &quot;react-scripts&quot;: &quot;5.0.1&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^10.4.7&quot;,
      &quot;postcss&quot;: &quot;^8.4.14&quot;,
      &quot;tailwindcss&quot;: &quot;^3.1.5&quot;
    }
  }
  
  </code></pre>
  <p>Help please &amp; thank you!</p>
  <p>edit: Testing reveals <code>border-red-500</code> works but <code>border-black</code> does not.</p>