Cannot exclude files with double extension with config purge field

[tylerlaws0n]

What version of Tailwind CSS are you using?

2.2.7

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

postcss-cli

What version of Node.js are you using?

16.3.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/tylerjlawson/repro-tailwind-purge-bug

Describe your issue

Demo of bug from reproduction repository

The issue is that the glob is not excluding .stories files.

link to related discussion

[thomasobrien99]

This seems to be an issue with v3 as well. I don't think it's a bug as much as just not supported, but the only way around it seems like moving stories to their own directory or manually listing each component file under content, rather than using a glob pattern :(

[thecrypticace]

Hey, you can totally do this (at least in Tailwind CSS v3.0+ — I did not check v2 in JIT mode) however the syntax is different. We use the library fast-glob which isn't a 1:1 mapping with bash syntax. It uses separate "negative" entries to ignore files or directories which you can read a bit more about here: https://github.com/mrmlnc/fast-glob#how-to-exclude-directory-from-reading

In your case what you'll want to do is include all potential matches: src/**/*.{ts,tsx}

And then use a second negative pattern by adding a leading ! to exclude the files you don't want: !src/**/*.stories.{ts,tsx}

You should end up with a config that looks like this

module.exports = {
  content: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.stories.{ts,tsx}",
  ],

  // …
}