Using SASS as Nuxt Tailwind main css

In this post, I will give an example of how to use a SASS as a default tailwind file in NuxtJS.

In nuxt config, install @nuxtjs/tailwindcss, and place tailwindcss options under buildModules

// nuxt.config.js
buildModules: [
  '@nuxtjs/tailwindcss',
],
tailwindcss: {
  cssPath: '~/assets/css/tailwind.scss',
}

create .scss file, and don't forget to import tailwind base style

// ~/assets/css/tailwind.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {}
@layer utilities {}
@layer components {
  // here goes your custom class
  .custom-button-div {
    @apply shadow-md;

    button {
      @apply btn-blue-500 p-4;
    }
  }
}

Reference:

Nuxt-TailwindCSS Options