title: How to extend classes of tailwind in Nuxt
body: <p>I am using <code>@nuxtjs/tailwindcss</code> in a SSR Nuxt project, and I want to extend classes in tailwindcss like this:</p>
  <p>Here is the key part of my <code>nuxt.config.js</code></p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      buildModules: [
          '@nuxtjs/tailwindcss',
      ],
      css: [
          '~/assets/app.scss',
      ],
      tailwindcss: {
          cssPath: '~/assets/tailwind.css',
      }
  }
  </code></pre>
  <p>In <code>app.scss</code></p>
  <pre><code>#__layout{
      position: relative;
      &amp;&gt;main{       
          &amp;&gt;header&gt;*:not(.fluid),
          &amp;&gt;main&gt;*:not(.fluid),
          &amp;&gt;footer&gt;*:not(.fluid){
              @extend .container;
              @extend .mx-auto;
              @extend .w-auto;
              @extend .px-2;
              @extend .sm\:px-2;
              @extend .md\:px-3;
              @extend .lg\:px-4;
          }
      }
  }
  </code></pre>
  <p>Errors occured</p>
  <blockquote>
  <p>The selector &quot;.container&quot; was not found.
  Use &quot;@extend .container !optional&quot; if the extend should be able to fail.</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/4tKic.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4tKic.png" alt="Use &quot;@extend .container !optional&quot; if the extend should be able to fail." /></a></p>
  <p>So, I added <code> !optional</code> for those classes:</p>
  <pre><code>            @extend .container  !optional;
              @extend .mx-auto  !optional;
              @extend .w-auto  !optional;
              @extend .px-2  !optional;
              @extend .sm\:px-2  !optional;
              @extend .md\:px-3  !optional;
              @extend .lg\:px-4  !optional;
  </code></pre>
  <p>node errors gone but styles are not what I expected.</p>
  <p>How can I solve this? To extend class in tailwind correctly?</p>
  <p>Thanks a lot!</p>