Warn when broad glob patterns are used in the content configuration

[RobinMalfait]

When you use a glob pattern in your content configuration that is too broad, it could be that you are accidentally including files that you didn't intend to include. E.g.: all of node_modules

This has been documented in the Tailwind CSS documentation, but it's still something that a lot of people run into.

This PR will try to detect those patterns and show a big warning to let you know if you may have done something wrong.

We will show a warning if all of these conditions are true:

1. We detect ** in the glob pattern
2. and you didn't explicitly use node_modules in the glob pattern
3. and we found files that include node_modules in the file path
4. and no other globs exist that explicitly match the found file

With these rules in place, the DX has nice trade-offs:

1. Very simple projects (that don't even have a node_modules folder), can simply use ./**/* because while resolving actual files we won't see files from node_modules and thus won't warn.
2. If you use ./src/** and you do have a node_modules, then we also won't complain (unless you have a node_modules folder in the ./src folder).
3. If you work with a 3rd party library that you want to make changes to. Using an explicit match like ./node_modules/my-package/**/* is allowed because node_modules is explicitly mentioned.

Note: this only shows a warning, it does not stop the process entirely. The warning will be show when the very first file in the node_modules is detected.

[philipp-spiess]

This is going to make builds so much faster for people that accidentally have these patterns in their config. Awesome! I left some input on the warning text

[thecrypticace]

should we use dir separators here? e.g. [/\\]${dir}[/\\]?

[RobinMalfait]

Hmm good question, I used \b to not have to deal with path separators at all haha.

[thecrypticace]

This seems good to me 👍

[LucaRed]

I think that this feature has false positives. This is the warning I get:

warn - Your `content` configuration includes a pattern which looks like it's accidentally matching all of `vendor` and can cause serious performance issues.
warn - Pattern: `./resources/views/**/*.blade.php`
warn - See our documentation for recommendations:
warn - https://tailwindcss.com/docs/content-configuration#pattern-recommendations

I may be wrong, but I don't think that ./resources/views/**/*.blade.php matches anything inside of the vendor folder.

By the way, this pattern is from the Laravel Jetstream default template.

[philipp-spiess]

@LucaRed Any chance that your views folder has a vendor subfolder? There are others with similar issues and we're already thinking about how we can improve this heuristics: #14145 Sorry for the trouble!

[LucaRed]

@philipp-spiess you're right, my project has a /resources/views/vendor folder because I need to override some package views.

[RobertBoes]

Just running into the same issue @LucaRed mentioned, not just Laravel Jetstream, also following the installation guide would trigger the warning; https://tailwindcss.com/docs/guides/laravel

Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
+    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}