title: Tailwind is not working on a new laravel project
body: <p>I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS.</p>
  <p>I then tried to use the sample code from Tailwind but it won't show up.</p>
  <p>This is my simple test code from the Tailwind docs: (from <a href="https://tailwindcss.com/docs/hover-focus-and-other-states" rel="nofollow noreferrer">https://tailwindcss.com/docs/hover-focus-and-other-states</a>)</p>
  <p><code>app.blade.php</code>: (You can run the code snippet because this is actually what I get in my project)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;display=swap"&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link rel="stylesheet" href="{{ mix('css/app.css') }}"&gt;
  
      &lt;!-- Scripts --&gt;
      
      &lt;script src="{{ mix('js/app.js') }}" defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="font-sans antialiased"&gt;
      &lt;button class="bg-red-500 hover:bg-red-700"&gt;
          Hover me
      &lt;/button&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>this is the <code>tailwind.config.js</code> file:</p>
  <pre><code>const defaultTheme = require('tailwindcss/defaultTheme');
  
  module.exports = {
      mode: 'jit',
      purge: [
          './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
          './vendor/laravel/jetstream/**/*.blade.php',
          './storage/framework/views/*.php',
          './resources/views/**/*.blade.php',
          './resources/js/**/*.vue',
      ],
  
      theme: {
          extend: {
              fontFamily: {
                  sans: ['Nunito', ...defaultTheme.fontFamily.sans],
              },
          },
      },
  
      variants: {
          extend: {
              opacity: ['disabled'],
          },
      },
  
      plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
  };
  </code></pre>
  <p>this is the <code>webpack.mix.js</code> file:</p>
  <pre><code>const mix = require('laravel-mix');    
    
  mix.js('resources/js/app.js', 'public/js').vue()
      .postCss('resources/css/app.css', 'public/css', [
          require('postcss-import'),
          require('tailwindcss'),
      ])
      .webpackConfig(require('./webpack.config'));
  
  if (mix.inProduction()) {
      mix.version();
  }
  </code></pre>
  <p>and this is the <code>app.css</code> file:</p>
  <pre><code>@import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';
  </code></pre>