title: Some Tailwind styles not working in production with Next.js
body: <p>For some reason a few styles don't seem to be working in production build hosted on Netlify. This seems to only be happening on a single component. It's a wrapper located at <code>./layout/FormLayout.tsx</code> (don't know if that changes anything). Here is the wrapper:</p>
  <pre class="lang-js prettyprint-override"><code>const FormLayout: React.FC&lt;FormLayout&gt; = ({ children, title, description }) =&gt; {
      return (
          &lt;div className=&quot;w-screen mt-32 flex flex-col items-center justify-center&quot;&gt;
              &lt;div className=&quot;p-6 flex flex-col items-center justify-center&quot;&gt;
                  &lt;h2 className=&quot;text-4xl font-semibold text-blue-400&quot;&gt;
                      {title}
                  &lt;/h2&gt;
                  {description &amp;&amp; (
                      &lt;h6 className=&quot;mt-4 text-md font-medium&quot;&gt;{description}&lt;/h6&gt;
                  )}
                  &lt;div className=&quot;mt-12 w-max&quot;&gt;{children}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>and it's used here:</p>
  <pre class="lang-js prettyprint-override"><code>const Register: React.FC&lt;RegisterProps&gt; = () =&gt; {
      return (
          &lt;FormLayout title=&quot;Register&quot; description=&quot;Register with your email.&quot;&gt;
              {/* form stuff. styles do work in here */}
          &lt;/FormLayout&gt;
      )
  }
  </code></pre>
  <p>Here are some of the config files:</p>
  <p>tailwind config:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
      darkMode: 'class',
      theme: {
          extend: {},
      },
      variants: {
          extend: {},
      },
      plugins: [],
  }
  </code></pre>
  <p>postcss config:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  </code></pre>
  <p>Here is a graphical example of what is happening:</p>
  <p><a href="https://i.stack.imgur.com/29MPf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/29MPf.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/ddJOb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ddJOb.png" alt="enter image description here" /></a></p>
  <p>For my build command, I use <code>next build &amp;&amp; next export</code>, and Netlify deploys the <code>/out</code> directory.</p>
  <p>All the code is <a href="https://github.com/herbievine/alpine-web" rel="noreferrer">here via github</a></p>