Exclude .mdx files from Tailwind class scanning except one specific file

[nikolailehbrink]

I’m trying to reduce my CSS file size after seeing a warning from Ahrefs:

Issue: CSS files larger than 15 kB

I found one cause for a larger bundled css file than necessary: Tailwind scans every .mdx file in my blog, even though most only contain code examples.

In reality, most of these MDX files only contain class names inside code blocks, so they shouldn’t contribute to the final CSS bundle.

What I tried

Following Tailwind v4 docs, I attempted to restrict scanning like this:

/* app.css */
@import "tailwindcss";
@import "tw-animate-css";

@source "./routes/blog/specific-slug/post.mdx";
@source not "./routes/blog/**/*.mdx";

But this doesn’t work:
The @source not seems to override the previous @source, and all MDX files still get scanned.

The one file I do want scanned (post.mdx) contains inline components (e.g. real Tailwind-based ), and I don't want to move it out to separate components.

What I need

I want to:
• Scan all .tsx/.ts files normally
• Scan only one specific .mdx file
• Ignore all other .mdx files

Problem

Right now it seems like:
• You can’t combine @source and @source not effectively for this case
• There’s no way to “include one and exclude the rest” cleanly

Let me know if I’m missing a workaround, or if this is something worth improving!

[mek-earnin]

Not sure if this will help, but I read from this PR, it says the order matters. So you could try switching the lines around.

Anyway, this sounds like the discussion I created and still get no answer, I'll also link it here just in case.