TailwindCSS styles are not being applied in Storybook within a Turborepo

You're working in a monorepo, not a traditional setup. A traditional setup would mean TailwindCSS is installed as part of the apps/storybook-react project, as expected - but for some reason you didn't install it there. Instead, you installed it in packages/react and then consumed it from apps/storybook-react.

TailwindCSS v4 relies on automatic source detection, which can behave unpredictably if it's installed in the wrong project and used via cross-references.

• Automatic Source Detection from TailwindCSS v4
• Adding an external source or a package from within node_modules for detection

If you don't want to change the installation structure, disable this behavior (by source(none)) and use the @source directive to explicitly define the directories where your js, ts, jsx, tsx, vue, etc. files that use TailwindCSS classes are located. You can use multiple @source directives.

./packages/react/src/styles/tailwind.css

@import "tailwindcss" source(none);
/ relative glob for ./packages/react/src/  /.{jsx,tsx} / 
@source "./..//.{jsx,tsx}";
/ relative glob for ./apps/storybook-react/  /.{jsx,tsx} / 
@source "./../../../../apps/storybook-react//.{jsx,tsx}";

Alternative (recommended)

Note: I would follow this approach, so I 100% recommend it - TailwindCSS should always be installed in the "final app"!

However, I don't understand why this monorepo structure is necessary, or why you wouldn't install TailwindCSS properly in apps/storybook-react. TailwindCSS should always be installed in the final "app", not integrated from an external package.

pnpm --filter ./packages/react remove tailwindcss @tailwindcss/vite
pnpm --filter ./apps/storybook-react add tailwindcss @tailwindcss/vite

In this case, you can extend the detected locations using @source, without having to disable source detection itself.

./apps/storybook-react/src/tailwind.css (instead of ./packages/react/src/styles/tailwind.css)

@import "tailwindcss";

./apps/storybook-react/.storybook/preview.ts

import type { Preview } from "@storybook/react-vite";
import "./../src/tailwind.css";
const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },
};
export default preview;

./apps/storybook-react/vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

If ./packages/react is a UI library, you can later integrate it into your storybook-react app like this:

./packages/react/src/styles/main.css

@source "./../"; / add ./packages/react/src to TailwindCSS sources /
@theme {
  --brand: #000;
}

./apps/storybook-react/src/tailwind.css

@import "tailwindcss"; / Install TailwindCSS /
@import "./../../../packages/react/src/styles/main.css"; / Install UI library /

With a correct monorepo setup, it's simpler based on the name given in ./packages/react/package.json (e.g. "name": "react-ui"):

@import "tailwindcss"; / Install TailwindCSS /
@import "react-ui/src/styles/main.css"; / Install UI library /

And as bizarre as it may sound, you don't need to install or use @tailwindcss/vite (and tailwindcss) in ./packages/react/vite.config.ts. You only need to assume that TailwindCSS will be properly installed in the app (currently in storybook-react) where you use the UI library.