[v4] Plugin compilation not working as expected

[JalenWasHere]

What version of Tailwind CSS are you using?

v4.0.0-alpha.28

What build tool (or framework if it abstracts the build tool) are you using?

Symfony AssetMapper + Tailwind CLI v4.0.0-alpha.28

What version of Node.js are you using?

v22

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/J3JP2FpVwx

Describe your issue

In Tailwind 3 you could configure content paths which allowed Tailwind to scan node_modules directories and add the utilities to the compiled CSS. In Tailwind 4 it seems there's a move towards not configuring content paths, but this causes the utilities in my node_modules to not be scanned. Old config tailwind.config.js:

module.exports = {
  content: [
    './assets/**/*.js',
    './templates/**/*.twig',
    './node_modules/flowbite/**/*.js',
  ],

  plugins: [require('flowbite/plugin')]
};

New config app.css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import 'tailwindcss';
@plugin 'flowbite/plugin';

@theme{
  --font-family-sans: 'Poppins', "sans-serif";

  --color-logo: #007FFF;
  --color-primary: #0096da;
  --color-secondary: #9E9EA2;
}

I build with:

yarn tailwindcss -i assets/styles/app.css -o assets/styles/app.tailwind.css

A workaround is to import the distributed css from Flowbite in my JavaScript but this causes the CSS to clash with my compiled Tailwind CSS.

What I expect:

The old method of configuring content or a detect for utilities used based on the plugin defined.

[philipp-spiess]

Hey! We have added the @source directive to help with this.

So you may try:

@source '../../node_modules/flowbite/**/*.js';

Note that the path is relative to you CSS file.

[JalenWasHere]

@philipp-spiess Thanks for the quick response, that works perfectly!