[v4] How to ignore specific files using "@source not" and glob pattern?

[mek-earnin]

What I want to do

Configuring a vite app to detect class names in the design system package and exclude custom styles in storybook files and unit test files.

Context

• An nx monorepo with apps and packages
• A vite app uses a design system package
• Each the design system component has Component.tsx, Component.stories.tsx, and Component.spec.tsx
• Stories contains custom styles just for documentation purposes and only apply in storybook
• tailwindcss@4.1.11, @tailwindcss/vite@4.1.11, vite@6.2.2

What I have tried

I added an arbitrary class i.e., w-[7777px], in certain files and tried building it with

npx @tailwindcss/cli -i ./tailwind.config.css -o ./output.css

then inspected whether the class is included in output.css.

1. file glob with @source not (not working)

/* tailwind.config.css */
@import "tailwindcss" source(none);

@source "./index.html";
@source "./src/**/*.{ts,tsx}"; /* Not sure if this is valid but seems to work */
@source "../../packages/design-system/src/**/*.{ts,tsx}"; /* Not sure if this is valid but seems to work */
@source not "../../**/*.{stories,spec}.{ts,tsx}"; /* doesn't work */
@source not "../../**/*.stories.tsx"; /* doesn't work */
@source not "../../**/*.spec.tsx"; /* doesn't work */

2. @config with content (not working)

/* tailwind.config.css */
@import "tailwindcss" source(none);

@config "./tailwind-content-glob.js";

// tailwind-content-glob.js
export default {
  content: [
    'index.html',
    'src/**/*.{ts,tsx}',
    '../../packages/design-system/src/**/*.{ts,tsx}',
    '!../../**/*.stories.tsx', // doesn't work
    '!../../**/*.spec.tsx', // doesn't work
  ],
}

Potential issues

• Could it be that @source or the new Scanner doesn't actually support file level glob but only supports directory level glob?
• The doc doesn't explicitly say it supports glob and implicitly hint that we should enter directory paths, e.g.

  Use @source to explicitly register source paths
  Use @source not to ignore specific paths

• However, this PR contains examples of using globs like @source "../../lib/ui/**/*.bin";, although unclear whether it works with @source not or not.

[zecka]

@mek-earnin
Do you find a solution ?

[lizuju]

@source not does support file paths and globs. It is not limited to directories.

There are tests in Tailwind's scanner for patterns like these:

@source not 'src/index.ts';
@source not '**/*.{jsx,tsx}';
@source not './src/**/ignore.html';

So if the negation is not taking effect, I would look at the pattern/base path rather than the feature itself.

For your case I would keep the negated patterns scoped to the exact source root you added, and avoid the broad ../../** pattern while debugging:

@import "tailwindcss" source(none);

@source "./index.html";
@source "./src/**/*.{ts,tsx}";
@source "../../packages/design-system/src/**/*.{ts,tsx}";

@source not "../../packages/design-system/src/**/*.stories.tsx";
@source not "../../packages/design-system/src/**/*.stories.ts";
@source not "../../packages/design-system/src/**/*.spec.tsx";
@source not "../../packages/design-system/src/**/*.spec.ts";

Two small gotchas:

1. @source paths are resolved from the stylesheet/base Tailwind is compiling, so make sure those ../../... paths are relative to tailwind.config.css, not the workspace root you happen to run the CLI from.
2. When testing with w-[7777px], make sure that exact class exists only in the file you expect to exclude. If the same arbitrary class appears in any included .tsx file, it will still be generated.

I would not use the old @config content array for this in v4. Since you are already using source(none), the clearer v4 setup is to keep the scanner inputs entirely in @source directives.