Custom tailwind css z-index not recognized.

None of my custom z-index extends are found by vite. I'm getting the following error:

[plugin:vite:css] [postcss] D:/laragon/www/laravel-ads-v2/resources/site-backend/app.css:3:1: The `z-1` class does not exist. If `z-1` is a custom class, make sure it is defined within a `@layer` directive.
D:/laragon/www/laravel-ads-v2/resources/site-backend/app.css:3:1
1  |  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2  |  
3  |  @tailwind base;
   |   ^
4  |  @tailwind components;
5  |  @tailwind utilities;
    at Input.error (D:\laragon\www\laravel-ads-v2\node_modules\postcss\lib\input.js:106:16)
    at AtRule.error (D:\laragon\www\laravel-ads-v2\node_modules\postcss\lib\node.js:115:32)
    at processApply (D:\laragon\www\laravel-ads-v2\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:380:29)
    at D:\laragon\www\laravel-ads-v2\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:532:9
    at D:\laragon\www\laravel-ads-v2\node_modules\tailwindcss\lib\processTailwindFeatures.js:57:50
    at async plugins (D:\laragon\www\laravel-ads-v2\node_modules\tailwindcss\lib\plugin.js:38:17)
    at async LazyResult.runAsync (D:\laragon\www\laravel-ads-v2\node_modules\postcss\lib\lazy-result.js:289:11)
    at async compileCSS (file:///D:/laragon/www/laravel-ads-v2/node_modules/vite/dist/node/chunks/dep-df561101.js:38868:25)
    at async TransformContext.transform (file:///D:/laragon/www/laravel-ads-v2/node_modules/vite/dist/node/chunks/dep-df561101.js:38266:56)
    at async Object.transform (file:///D:/laragon/www/laravel-ads-v2/node_modules/vite/dist/node/chunks/dep-df561

In my resources/site-backend/app.css I have:

@layer base {
    body {
        @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
    }
}

In my tailwind.backend.config, I have:

theme: {
      ...
	 extend: {  
            zIndex: {
                999999: '999999',
                99999: '99999',
                9999: '9999',
                999: '999',
                99: '99',
                9: '9',
                1: '1',
	        }	  
     }
}

In my vite.backend.config.js, I have:

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/site-backend/app.css',
            ],
            refresh: [
                ...refreshPaths,
            ],
            buildDirectory: '/assets/backend/dist',
        }),
    ],
    css: {
        postcss: {
            plugins: [
                require("tailwindcss")({
                    config: "./tailwind-back.config.js",
                }),
                require("autoprefixer"),
            ],
        },
    },
});