[v4] Ignore certain paths from scanning no longer supported

[CicerBro]

What version of Tailwind CSS are you using?

v4.0.0

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

Vite 6

What version of Node.js are you using?

22.13

Describe your issue

In v3 one could add a line with an exclamation mark ! prefix in the tailwind.config.js to exclude certain files or paths from being scanned:

    content: [
        './resources/views/**/*.blade.php',
        '!./resources/views/somefoldername/*',
    ],

but that option seems to have vanished in v4. I know I can do @import 'tailwindcss' source(none); and then @source '../../../resources/views'; which works but there is no way to exclude a subfolder from that path.

One work around is to add all the subfolders by hand, but that's a bit of a PITA when the project grows and you forget you need to add every view subfolder to the config css now.

[CicerBro]

Just inquiring if this is on the roadmap to get fixed/implemented or if this is by design for v4?

[fini]

We have some css modules and tax files which are only supposed to be used with Storybook, and after upgrading to TW4, all those css modules have been "sucked" into our styles.css, the content setting in tailwind.config indeed seems to be ignored completely, would be very useful with a @ignore-path or similar.

[unional]

I also have similar needs, I want to exclude any test and story files.

content: [
  '!./src/stories/**/*.{js,jsx,ts,tsx,mdx}',
  '!./src/testing/**/*.{js,jsx,ts,tsx,mdx}',
  '!./src/**/*.{spec,test,unit,accept,integrate,system,stories}.*',
  '!./src/**/*.stories.{js,jsx,ts,tsx,mdx}',
  './src/**/*.{js,jsx,ts,tsx}'
],

[williamisnotdefined]

I'm facing the same problem and seems the issue is not directly related to the @tailwindcss-vite but tailwindcss itself.
First because im working with next and the same problem is happening and second point:

extractConfigs in file resolve-config.ts

I strongly believe (but ofc I can be mistaken) the issue is in the snippet above, there is no filter, all files in content array are being included. Also didnt find any tests in resolveConfig with content array being tested.

Seems the package @tailwindcss-vite checks for character "!" in the generation

This directs my fellings towards the resolve-config instead of the vite plugin..

It was what my 5 minutes research gaves me, just sharing what I saw in order to make the work of somebody faster.

ty in advance!

[summerstarlee]

Tailwind V4 版本的扫描文件不再使用配置文件设置， 官方文档提供了以下方法设置：

Tailwind 将扫描项目中的每个文件以查找类名，但以下情况除外：
.gitignore您的文件中的文件
二进制文件，例如图像、视频或 zip 文件
CSS 文件
常见的包管理器锁文件

解决方案：

1. 将需要忽略扫描的文件放入到 .gitignore 中
2. 用于@source明确注册相对于样式表的源路径： @source "../node_modules/@acmecorp/ui-lib" 当你需要扫描使用 Tailwind 构建的外部库时，这特别有用，因为依赖项通常列在你的.gitignore文件中，并且默认被 Tailwind 忽略。
3. 设置基本路径, Tailwind 默认使用当前工作目录作为扫描类名的起点。要明确设置源检测的基本路径，请source()在 CSS 中导入 Tailwind 时使用该函数： @import "tailwindcss" source("../src");
4. 禁用自动检测, source(none)如果您想要明确注册所有源，请使用完全禁用自动源检测, 这在具有多个 Tailwind 样式表的项目中很有用，您需要确保每个样式表仅包含每个样式表所需的类。

@import "tailwindcss" source(none);
@source "../admin";
@source "../shared";

[dylanirion]

I addition to the above, perhaps some might find this useful for excluding parts of a directory?

@source "../../some/folder/{*, !node_modules}/src/*.{js,jsx,ts,tsx}";

[rvanbaalen]

In addition, slightly related to this, the .gitignore file is magically interpreted as a list of files to ignore from the process.

This was super annoying, not documented anywhere and cost me two whole days to debug. Oh. My. God.

How to ignore a file from git but still allow it to be rendered by Tailwind v4?! These are two completely separate concerns.