Can't use custom Tailwind utilities class in SCSS files

[devenini]

In src/styles/utils/text.scss we define a new custom class for .u-text-body for example :

@layer utilities {
    .u-text-body {
        @include -body;
    }

    .u-text-subtitle {
        @include -subtitle;
    }
}

But we can't use it in SCSS files with the @apply rule. It works when you use it on a DOM element in Astro files. The workaround would be to import globally the custom @layer rules with the mixins within the astro.config.ts like we did for others declarations :

export default defineConfig({
    site: 'https://locomotive-astro-boilerplate.vercel.app',
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `
                        @use "sass:math";
                        @use "sass:list";
                        @use "@styles/tools/maths" as *;
                        @use "@styles/tools/functions" as *;
                        @import "@styles/mixins/mixins-heading";
                        @import "@styles/mixins/mixins-text";
                        @import "@styles/utils/text";
                    `
                }
            },
            ...
       }
 })

It seems like even if mixins and utils are imported in the main.scss files they are not interpreted in other SCSS files, unless you redeclare the import statements in the current file

[devenini]

Bug can be reproduced on the branch bug/reproduce-tailwind-layer and executing the command npm run build. You might need to rm -rf dist/ if you built the project beforehand. The error should be :

[astro:build] The `u-text-body` class does not exist. If `u-text-body` is a custom class, make sure it is defined within a `@layer` directive.
file: /astro-boilerplate/src/components/Wysiwyg/Wysiwyg.astro:21:3