NextJS and v4 Beta does not see class

[maddog986]

What version of Tailwind CSS are you using?
v4.0.0-beta.9

What build tool (or framework if it abstracts the build tool) are you using?
NextJS: 15.1.4
@tailwindcss/postcss: 4.0.0-beta.9

What version of Node.js are you using?
v20.9.0

Reproduction URL
https://github.com/[maddog986/nextjs-tailwindv4](https://github.com/maddog986/nextjs-tailwindv4)

Describe your issue

None of the classes defined in any of the *.tsx files are being processed in the output css.

I have spent more than a few hours trying different configurations in a private project, however I could not get any class names to appear in the output CSS in either dev or build modes. I even tried the @sources to manually include the files, custom tailwind.config.js to define "content" sources, but nothing I tried seemed to work. Even the NextJS playground does not work correctly.

[jonasms]

I'm having a similar issue. Trying to get classes from a local lib included. Was doing so successfully w/ v3 doing the following:

/tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    ...
    "./node_modules/@diablo-systems/ui/dist/**/*.{js,jsx,ts,tsx,md,mdx,cjs}",
  }
  ...
} 

File structure

node_modules/
  ...
  @diablo-systems/ui
    dist/
      ui.js
      ui.umd.cjs

Currently have for v4:

/globals.css

@import 'tailwindcss';
@source "../node_modules/@diablo-systems/ui";

Re @source, reference these docs

[wongjn]

Your repo seems to be working for me at least. Snippet of output CSS:

…
@layer utilities {
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
}
…