title: Styles working locally but not applied properly when running `npm run build` on react app with tailwindcss
body: <p>I'm trying to figure out what exactly is happening, but I'm all out of ideas. I've recently transitioned to Tailwind and I set it up according to instructions for create-react-app, which can be seen <a href="https://tailwindcss.com/docs/guides/create-react-app" rel="nofollow noreferrer">here</a>.</p>
  <p>I've also tried another setup, but I got the same problem. That setup can be seen <a href="https://rfitz.io/blog/tailwind-with-react/" rel="nofollow noreferrer">here</a>.</p>
  <p>For whatever reason, everything is working normally in local development (when running code with <code>npm start</code>). But when I build the code, I'm getting some really weird stylings.</p>
  <p><a href="https://i.stack.imgur.com/S3pPE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S3pPE.png" alt="This is in local development" /></a>
  This is in local development</p>
  <p><a href="https://i.stack.imgur.com/wHyJw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wHyJw.png" alt="This is when npm run build is run" /></a>
  This is when <code>npm run build</code> is run.</p>
  <p>Specific part of the code which isn't displaying as it should:</p>
  <pre class="lang-js prettyprint-override"><code> &lt;div className='w-full lg:w-1/4 m-auto p-5 text-center lg:shadow-2xl rounded-xl'&gt;
        &lt;HelmetComponent
          title='Log in | Notify Me'
          description='Login page for Notify Me.'
        /&gt;
        &lt;NavbarLoggedOut/&gt;
        &lt;h1 className='font-bold'&gt;Log in&lt;/h1&gt;
  
        &lt;LoginForm
          onSubmit={onLogin}
        /&gt;
  
        &lt;div className='text-base mt-2'&gt;
          &lt;p&gt;
            Don&amp;#39;t have an account? &lt;LinkButton onClick={() =&gt; history.push('/signup')} label='Sign up here!' /&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div className='mt-4'&gt;
          &lt;GoogleOAuthComponent
            buttonText='Log in with Google'
            setErrorMessage={updateErrorMessage}
          /&gt;
        &lt;/div&gt;
  
        &lt;div className='mt-4'&gt;
          &lt;LoadingBar
            isLoading={waitingForServerResponse}
          /&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          {displayInfoMessage()}
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I've opened both files with inspect element, and everything seems to be the same. And problem is everywhere where there is any kind of <code>h1</code> element as far as I saw.</p>
  <p>This is my <code>tailwind.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const colors = require('tailwindcss/colors')
  
  module.exports = {
    important: true,
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        main: {
          light: '#508991',
          DEFAULT: '#1b262c',
          '100': '#DBF9F4',
          '700': '#60949B',
        },
        black: colors.black,
        white: colors.white,
        gray: colors.trueGray,
        indigo: colors.indigo,
        red: colors.rose,
        yellow: colors.amber,
        blue: colors.blue,
        green: colors.green,
      },
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
  
  </code></pre>
  <p>I've also tried setting <code>purge: false</code> to see if that was causing the problem, but it didn't change anything.</p>
  <p>If anyone has any kind of idea what could be causing this, I'd appreciate it.</p>
  <p>EDIT: I've also noticed that the padding differs on development and build, so if anyone has any idea why that's happening, that would be also nice.</p>
  <p>FINAL EDIT: Problem was in the leftover boostrap files, since the project used that before switching to tailwind. In development environment bootstrap css was loaded on top of everything else, which lead to strange behavior.</p>
  <p>There was leftover import in the <code>index.tsx</code>: <code>import 'bootstrap/dist/css/bootstrap.min.css'</code></p>
  <p>After that import was removed, and <code>boostrap</code> package was removed from <code>package.json</code> file and <code>node_modules</code> folder was deleted and packages were reinstalled problem disappeared. True layout was actually generated by <code>npm run build</code></p>