title: Tailwindcss not working with next.js; what is wrong with the configuration?
body: <p>For some reason, <code>tailwind</code> is not rendering properly in next.js.</p>
  <p>I'm wondering if something is wrong with my settings?</p>
  <p>Styles folder - tailwind.css</p>
  <p>@tailwind base;</p>
  <pre><code>/* Write your own custom base styles here */
  
  /* Start purging... */
  @tailwind components;
  /* Stop purging. */
  
  /* Write you own custom component styles here */
  .btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  
  /* Start purging... */
  @tailwind utilities;
  /* Stop purging. */
  
  /* Your own custom utilities */
  </code></pre>
  <p>....</p>
  <p>_app.js</p>
  <pre><code>import React from &quot;react&quot;;
  // import &quot;styles/global.scss&quot;;
  
  
  import 'styles/tailwind.css'
  
  
  import NavbarCustom from &quot;components/Layout/NavbarCustom&quot;;
  import Footer from &quot;components/Layout/Footer&quot;;
  import &quot;util/analytics.js&quot;;
  import { ProvideAuth } from &quot;util/auth.js&quot;;
  
  function MyApp({ Component, pageProps }) {
    return (
      &lt;ProvideAuth&gt;
        &lt;&gt;
          &lt;NavbarCustom
            bg=&quot;white&quot;
            variant=&quot;light&quot;
            expand=&quot;md&quot;
            logo=&quot;icons/Logo_512px.png&quot;
          /&gt;
  
          &lt;Component {...pageProps} /&gt;
  </code></pre>
  <p>What am I doing wrong? so confused, usually this sort of setup is fine.</p>
  <p>This is the site btw - <a href="https://moodmap.app/" rel="noreferrer">https://moodmap.app/</a> .</p>
  <h3>using the information below, made changes and still same issue weirdly.</h3>
  <p><a href="https://moodmap.app/" rel="noreferrer">https://moodmap.app/</a> is the site example.</p>
  <p>tailwind.config.js</p>
  <pre><code>module.exports = {
    future: {
      removeDeprecatedGapUtilities: true,
    },
    purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
    theme: {
      extend: {
        colors: {
          'accent-1': '#333',
        },
      },
    },
    variants: {},
    plugins: [],
  }
  </code></pre>
  <p>postcss.config.js</p>
  <pre><code>module.exports = {
      plugins: [
        'tailwindcss',
        'postcss-flexbugs-fixes',
        [
          'postcss-preset-env',
          {
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
            features: {
              'custom-properties': false,
            },
          },
        ],
      ],
    }
  
  {
    &quot;name&quot;: &quot;MoodMap&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;keywords&quot;: [
      &quot;MoodMap&quot;
    ],
    &quot;dependencies&quot;: {
      &quot;@analytics/google-analytics&quot;: &quot;0.2.2&quot;,
      &quot;@stripe/stripe-js&quot;: &quot;^1.5.0&quot;,
      &quot;analytics&quot;: &quot;0.3.1&quot;,
      &quot;fake-auth&quot;: &quot;0.1.7&quot;,
      &quot;mailchimp-api-v3&quot;: &quot;1.13.1&quot;,
      &quot;next&quot;: &quot;9.5.3&quot;,
      &quot;query-string&quot;: &quot;6.9.0&quot;,
      &quot;raw-body&quot;: &quot;^2.4.1&quot;,
      &quot;rc-year-calendar&quot;: &quot;^1.0.2&quot;,
      &quot;react&quot;: &quot;16.12.0&quot;,
      &quot;react-dom&quot;: &quot;16.12.0&quot;,
      &quot;react-hook-form&quot;: &quot;4.10.1&quot;,
      &quot;react-query&quot;: &quot;2.12.1&quot;,
      &quot;react-transition-group&quot;: &quot;^4.4.1&quot;,
      &quot;stripe&quot;: &quot;^8.52.0&quot;
    },
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;,
      &quot;stripe-webhook&quot;: &quot;stripe listen --forward-to localhost:3000/api/stripe-webhook&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;postcss-flexbugs-fixes&quot;: &quot;^4.2.1&quot;,
      &quot;postcss-preset-env&quot;: &quot;^6.7.0&quot;,
      &quot;stylelint&quot;: &quot;^13.7.1&quot;,
      &quot;stylelint-config-standard&quot;: &quot;^20.0.0&quot;,
      &quot;tailwindcss&quot;: &quot;^1.8.9&quot;
    }
  }
  </code></pre>
  <p>Thanks!</p>