Multiple CSS files with shared Tailwind @layer directive (in NuxtJS)

In this post, I want to share how to use multiple CSS files that share the same tailwind base style and @layer directive.

Consider you already configure your tailwind configuration (if not you can read the article on how to configure it in NuxtJS here Using SASS as Nuxt Tailwind main CSS) (you can ignore the SASS thing and apply with normal .css)

In your component

// ~/components/SomeComponent.vue
<template>
  <div>
    <button class="this-component-button">Button</button>
  </div>
</template>
<style lang="scss">
@import '~/assets/css/this-component-style.scss'
...
</style>

Example of tailwind.scss

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

@layer components {
  .app-button {
    @apply bg-blue-500 p-4;
  }
}

And now you can use .app-button class by importing tailwind.scss or other CSS files on the head of the file

// ~/assets/css/this-component-style.scss
/* 
* Import base tailwind css.
* This will call and share @layer directive from tailwind.scss (in this example I want to use .app-button class)
*/
@import '~/assets/css/tailwind.scss';

@layer base {}
@layer utilities {}
@layer components {
  // here goes your custom class
  .this-component-button {
     // and now you can call .app-button class
     @apply app-button rounded-md;
  }
}