How to extend classes of tailwind in Nuxt

I am using @nuxtjs/tailwindcss in a SSR Nuxt project, and I want to extend classes in tailwindcss like this:

Here is the key part of my nuxt.config.js

module.exports = {      buildModules: [          '@nuxtjs/tailwindcss',      ],      css: [          '~/assets/app.scss',      ],      tailwindcss: {          cssPath: '~/assets/tailwind.css',      }  }  

In app.scss

#__layout{      position: relative;      &>main{                 &>header>*:not(.fluid),          &>main>*:not(.fluid),          &>footer>*: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;          }      }  }  

Errors occured

The selector ".container" was not found. Use "@extend .container !optional" if the extend should be able to fail.

So, I added !optional for those classes:

            @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;  

node errors gone but styles are not what I expected.

How can I solve this? To extend class in tailwind correctly?

Thanks a lot!

https://stackoverflow.com/questions/66718035/how-to-extend-classes-of-tailwind-in-nuxt March 20, 2021 at 11:46AM