How to use this nuxt-tailwindcss with scss?

[MetanoiaRichi]

Hello, I'm pretty new to nuxt and tailwind. How do I setup scss with nuxt-tailwindcss? I've read something about it is recommended to use postcss but how do I setup that in my project? Where do I import my scss files?

I'm lost and don't know how to set this up. I'll appreciate it if someone could point me in the right direction. Thank you!

[AntonAleikin]

Hi, to use SCSS in NUXT you simply need to install SASS & sass-loader modules as specified in nuxt docs: https://nuxtjs.org/docs/directory-structure/assets#sass When modules are installed - open your .vue file (e.g. page or component) and add the 'lang' attr to the

.

If you want to write scss in a separate files - you should locate these files in the ASSETS folder in your Nuxt project. See the docs on how to import scss files in the nuxt.config.js: https://nuxtjs.org/docs/directory-structure/assets#styles

In case of Tailwind.css usage - you have to install it as specified in the nuxt-tailwind docs: https://tailwindcss.nuxtjs.org/ and then simply use the SCSS syntax, for example, to @apply tailwind classes inside your custom class like so: .main-button { @apply px-4 }

[valdoryu]

Hi, I also use SCSS but can't figure out how to apply in my vue component styles I followed every instruction I tried

.myClass { @apply w-4/12; }

And I get

The w-4/12, class does not exist. If w-4/12, is a custom class, make sure it is defined within a @layer directive.

[ineshbose]

Closing this issue as it is believed to be resolved/stale now. These docs should help if required - https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus