React storybook in NX monorepo no longer building with tailwind.[Bug]

What version of `vite` are you using?

4.3.9

System info and storybook versions

System: OS: Windows 10 10.0.22000 CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor Binaries: Node: 18.15.0 - C:\Program Files\nodejs\node.EXE npm: 9.6.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22000.120.0), Chromium (113.0.1774.35) npmPackages: @storybook/addon-a11y: ^7.0.25 => 7.0.25 @storybook/addon-essentials: ^7.0.25 => 7.0.25 @storybook/core-common: ^7.0.25 => 7.0.25 @storybook/core-server: ^7.0.25 => 7.0.25 @storybook/react: ^7.0.25 => 7.0.25 @storybook/react-vite: ^7.0.25 => 7.0.25 @nx/storybook: 16.3.2 @nx/vite: 16.3.2 storybook: 7.0.25

Describe the Bug

I working within NX monorepo supporting a react application. within the libs i have a blank library that hosts my storybook configuration that maps to stories and libs throughout the monorepo. for the most part its always worked perfectly fine. At the base of the monorepo i have a tailwind-workspace-preset.js file with monorepo wide defaults. this is passed into my tailwind.config.js file within my storybook library. seemingly out of nowhere im now getting this error....from what i can tell the preset at the base of the monorepo is not being applied to the final build output. this isn't a problem with the nextjs builder im using in another project using the exact same configuration. even rolling back versions of what i suspect to be the issue keeps coming up with this error. any assistance would be great before i throw this computer out the window and re-enlist.

[vite] Internal server error: [postcss] F:/client-projects/[path to repo]/libs/design-system/tailwind.css:1:1: The `font-body` class does not exist. If `font-body` is a custom class, make sure it is defined within a `@layer` directive.

this is my css class in the root of my design system lib thats imported via the preview.tsx file within my .storybook folder.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-body text-neutral-600;
  }
}

My postcss file

const { join } = require("path");

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {
      config: require(join(__dirname, "tailwind.config.js")),
    },
    autoprefixer: {},
  },
};

tailwind config file

const { createGlobPatternsForDependencies } = require("@nx/react/tailwind");
const { join } = require("path");

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("../../tailwind-workspace-preset.js")],
  content: [
    join(__dirname, ".storybook/preview.{js,ts,jsx,tsx}"),
    join(__dirname, "../libs-new/common/ui-*/**/(*.{tsx,jsx,ts,js})"),
    ...createGlobPatternsForDependencies(__dirname, "/**/(*.{tsx,jsx,ts,js})"),
  ],
};

and finally the imported preset from the base of the monorepo (other theme objects redacted for brevity

import colors from "tailwindcss/colors";
import { fontFamily } from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
const config = {
  corePlugins: {
    aspectRatio: false,
  },
  darkMode: "class",
  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("tailwind-scrollbar")({ nocompatible: true }),
    require("@tailwindcss/forms")({ strategy: "class" }),
  ],
  theme: {
    fontFamily: {
      body: ["Nunito", ...fontFamily.sans],
    },
  },
};

export default config;

Link to Minimal Reproducible Example

No response

Participation

[ ] I am willing to submit a pull request for this issue.

storybookjs / builder-vite